[英]Responsive image overlay with hover effect on another html element
1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it? 第一个问题:当我将鼠标悬停在图像上时会显示文本覆盖,但是我希望当我将鼠标悬停在具有“ point”类的跨度上时会显示覆盖。
2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it? 第二个问题:文本叠加层没有响应,不适合图像大小,我想当我调整图像大小时,文本叠加层会随图像调整大小,我该怎么做?
I would be thanful for a javascript, bootstrap, css or a different answer! 我将非常感谢javascript,bootstrap,css或其他答案!
Demo: http://jsfiddle.net/0qgcn2uu/9/ 演示: http : //jsfiddle.net/0qgcn2uu/9/
HTML: HTML:
<span class="point"></span>
<div class="caption">
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
</a>
</div>
</div>
</div>
CSS: CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
background: rgba(248, 214, 215, .5);
}
*/
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.