Forums

MBM

I've modified css that enlarges a thumbnail on mouseover. I've used figcaption to caption the thumbnails but how do I caption the image after it has been enlarged?

http://46.252.196.94/Misc/css3/index.html

The css :

body{
	background:url(../images/Wooden_Flooring_HD.png) #000 center top no-repeat;
	font-family: 'Ubuntu Condensed', sans-serif;
}
    
#gallery {
margin-left: 20px;
margin-right: auto;
}
  
		  
#gallery ul{
/* This position the ul content in the middle of the gallery*/
margin-left:-30px; 
}


#gallery ul li {
/* In order to create the proper effect with hover we should use display inline-table
    This will display the big picture right next to its thumbnail
*/
list-style:none; display:inline-table;
border: 1px solid #ffffff;
background-color:#ffffff;
padding: 6px 6px 6px 6px;
margin-left:20px;
margin-top:100px;
}
 
 
/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
/* Animation with transition in Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition-timing-function: 0.6s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The the opacity to 0 to create the fadeOut effect*/
opacity:0;
visibility:hidden; 
position:fixed;
margin-top:10px; 
margin-left:-200px; 
border:1px solid black;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
 /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}
    
/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
/* width and height is how much the picture is going to growth with the effect */
width:70%; 
height:70%;
opacity:1; 
visibility:visible;
position:absolute;
border: 1px solid #ffffff;
background-color:#ffffff;
padding: 6px 6px 6px 6px;
top: 160px;
left: 400px; /*position where enlarged image should offset horizontally */
}

figcaption { 
text-align: center; 
display: block; 
font-size: 22px;
}

The HTML :

<head>
<title>CSS3 Image Gallery</title>

<link rel="stylesheet" type="text/css" media="screen" href="styles/desktop.css" />

</head>
<body>

<div id="gallery">
<ul>
<li>
<img src="images/Spartacus_001.png" class="mini" width="356" height="200" />
<img src="images/Spartacus_001.png" class="pic" />
<figcaption>Spartacus The Television Series</figcaption>
</li>
<li>
<img src="images/soccereurope_001.png" class="mini" width="356" height="200" />
<img src="images/soccereurope_001.png" class="pic" />
<figcaption>soccer-europe.com</figcaption>
</li>
<li>
<img src="images/concept_clothing_001.png" class="mini" width="356" height="200" />
<img src="images/concept_clothing_001.png" class="pic" />
<figcaption>concept clothing wear</figcaption>
</li>
</ul>
</div>

</body>
</html>

Mottie

First off, I would suggest using smaller background and thumbnail images... it was painful for me to watch them slowly load. The all of the images are 2 to 3Mb in size and don't need to be a "png" type file, the "jpg" type will work just as well and be much smaller.

As for adding captions, change the ".pic" to a div wrapping a copy of both the img and figcaption. Then set the image dimension to be 100% width and height (Demo):

HTML

<div id="gallery">
    <ul>
        <li>
            <img src="images/Spartacus_001.png" class="mini" width="356" height="200" />
            <figcaption>Spartacus The Television Series</figcaption>
            <div class="pic">
                <img src="images/Spartacus_001.png" />
                <figcaption>Spartacus The Television Series</figcaption>
            </div>
        </li>
        <li>
            <img src="images/soccereurope_001.png" class="mini" width="356" height="200" />
            <figcaption>soccer-europe.com</figcaption>
            <div class="pic">
                <img src="images/soccereurope_001.png" />
                <figcaption>soccer-europe.com</figcaption>
            </div>
        </li>
        <li>
            <img src="images/concept_clothing_001.png" class="mini" width="356" height="200" />
            <figcaption>concept clothing wear</figcaption>
            <div class="pic">
                <img src="images/concept_clothing_001.png" />
                <figcaption>concept clothing wear</figcaption>
            </div>
        </li>
    </ul>
</div>

New CSS

#gallery ul li .pic img {
    width: 100%;
    height: 100%;
}

Modified CSS (only this line was changed)

#gallery ul li:hover .pic {
    height: auto;
}

MBM

Thank you. That worked a treat. The website will be optimised for 1080P HD displays and that's why I am using large images but I've added thumbnails to speed it up, a little.

treehouse : what would you like to learn today?

Forums

[Solved] Display caption after image enlarged on mouseover?