- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
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 :
CSS3 Image Gallery
Spartacus The Television Series
soccer-europe.com
concept clothing wear
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
Spartacus The Television Series
Spartacus The Television Series
soccer-europe.com
soccer-europe.com
concept clothing wear
concept clothing wear
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;
}
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
