Sorry if title or this comment isn't that much understandable, I don't speak English.
The problem is that, I wrote a code that when user hove his mouse on picture, the picture will be previewed in a bigger size. When enlarged, the pic will include a description, the problem is when the picture is very big, the description box will not stretch accordingly. I found this problem when I wanted to make large images preview to be previewed smaller, and to solve this problem I wrote this line:
ul.enlarge span img {
max-width:600%;
}
It solved the resize problem but now the caption doesn't fit the new size.
I found on internet tutorials, this one is neat and similar for what I want but I still face the same problem.
Note: If image is small, the caption will not face any problem, the problem is only for big images.
Thank you.
ul.enlarge{
list-style-type:none;
}
ul.enlarge li{
display:inline-block;
position: relative;
z-index: 0;
margin:5px 5px 0 0px;
}
ul.enlarge span{
position:absolute;
left: -9999px;
}
ul.enlarge img{
background-color:#eaeaed;
padding: 4px;
border: 1px solid #9799a7;
}
ul.enlarge li:hover{
z-index: 50;
}
ul.enlarge li:hover span{
top: -20px;
left: 50px;
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
ul.enlarge span{
padding: 10px;
background:#eaeaed;
text-align:center;
color: #495a62;
}
/* This is to solve the problem when huge images are previewed, it shows them smaller */
ul.enlarge span img {
max-width:600%;
}
<body>
<ul class="enlarge">
<li>
<img src="http://ift.tt/1lbBjv7" alt="description" width="100px" height="100px"/>
<span>
<img src="http://ift.tt/1lbBjv7" alt="description"/>
<div class="phototitle">
Photo caption is too small or don't fit image's size.
</div>
</span>
</li>
</ul>
</body>
Aucun commentaire:
Enregistrer un commentaire