"Vermeer"
Bootstrap 3.3.0 Snippet by emileejohnson

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="margin-top:10px;"> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel-heading"> <h3 class="panel-title">Young Woman with a Water Pitcher</h3> </div> <div class="panel panel-default"> <div class="panel-image"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/young_woman_with_a_water_pitcher.jpg" class="panel-image-preview" /> <label for="toggle-1"></label> </div> <input type="checkbox" id="toggle-1" class="panel-image-toggle"> <div class="panel-body"> <h4>Young Woman with a Water Pitcher</h4> <p>In the early and mid 1660s, Vermeer painted a group of closely related work which the art historian Lawrence Gowing called the "pearl pictures" in honor of their exquisite facture and for the fact that each work features a pearl necklace. In these compositions the artist made a decisive move away from the cubical interior spaces, which he and De Hooch had brought to near formal perfection.</p> </div> <div class="panel-footer text-center"> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="panel-heading"> <h3 class="panel-title">Girl With A Pearl Earring</h3> </div> <div class="panel panel-default"> <div class="panel-image hide-panel-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/girl_with_a_pearl_earring.jpg" class="panel-image-preview" /> <label for="toggle-2"></label> </div> <input type="checkbox" id="toggle-2" class="panel-image-toggle"> <div class="panel-body"> <h4>Girl With A Pearl Earring</h4> <p>The painting is a tronie, the Dutch 17th-century description of a 'head' that was not meant to be a portrait. It depicts a European girl wearing an exotic dress, an oriental turban, and an improbably large pearl earring. In 2014, Dutch astrophysicist Vincent Icke raised doubts about the material of the earring and argued that it looks more like polished tin than pearl on the grounds of the specular reflection, the pear shape and the large size of the earring.</p> </div> <div class="panel-footer text-center"> </div> </div> </div> </div> <div class="row form-group"> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">The Milkmaid</h3> </div> <div class="panel-image hide-panel-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/milkmaid.jpg" class="panel-image-preview" /> <label for="toggle-3"></label> </div> <input type="checkbox" id="toggle-3" class="panel-image-toggle"> <div class="panel-body"> <h4>The Milkmaid</h4> <p>The Milkmaid (Dutch: De Melkmeid or Het Melkmeisje), sometimes called The Kitchen Maid, is an oil-on-canvas painting of a "milkmaid", in fact a domestic kitchen maid, by the Dutch artist Johannes Vermeer. It is now in the Rijksmuseum in Amsterdam, the Netherlands, which regards it as "unquestionably one of the museum's finest attractions".</p> </div> <div class="panel-footer text-center"> </div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Woman Holding A Balance</h3> </div> <div class="panel-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Johannes_Vermeer_-_Woman_Holding_a_Balance_-_Google_Art_Project.jpg/530px-Johannes_Vermeer_-_Woman_Holding_a_Balance_-_Google_Art_Project.jpg" class="panel-image-preview" /> <label for="toggle-4"></label> </div> <input type="checkbox" id="toggle-4" checked class="panel-image-toggle"> <div class="panel-body"> <h4>Woman Holding A Balance</h4> <p>At one time the painting, completed 1662–1663, was known as Woman Weighing Gold, but closer evaluation has determined that the balance in her hand is empty. Opinions on the theme and symbolism of the painting differ, with the woman alternatively viewed as a symbol of holiness or earthliness.</p> </div> <div class="panel-footer text-center"> </div> </div> </div> <a href="http://bootsnipp.com/iframe/snippets/B2yEp" target="_blank">Best viewed full screen</a><br> </div> </div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .panel-image { position: relative; } .panel-image img.panel-image-preview { width: 100%; border-radius: 4px 4px 0px 0px; } .panel-image label { display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .panel-heading ~ .panel-image img.panel-image-preview { border-radius: 0px; } .panel-body { overflow: hidden; } .panel-image ~ input[type=checkbox] { position:absolute; top:- 30px; z-index: -1; } .panel-image ~ input[type=checkbox] ~ .panel-body { height: 0px; padding: 0px; } .panel-image ~ input[type=checkbox]:checked ~ .panel-body { height: auto; padding: 15px; } .panel-image ~ .panel-footer a { padding: 0px 10px; font-size: 1.3em; color: rgb(100, 100, 100); } .background-color { background-color: #0004; color: #4555; }

Related: See More


Questions / Comments: