英文:
CSS Hover Effect on 2 Overlapping Images Simultaneously
问题
我试图仅使用CSS创建此悬停效果，但如果需要，也可以使用JavaScript。
我能够在HTML中创建布局并为每个图像单独添加悬停状态，但无法同时创建一个同时作用于两个图像并以相反方式作用的悬停效果。
这是我尝试过的内容，并且在每个图像上都有效，但我需要同时改变两个图像。
#wrap img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
img.hvrimg1 {
position:relative;
bottom:180px;
left: 260px;
z-index: 1;
}
img.hvrimg1:hover {
position:relative;
filter: blur(3px);
-moz-transform: translate(-10px, -0px);
-ms-transform: translate(-10px, -0px);
-o-transform: translate(-10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(-10px, -0px);
}
img.hvrimg2 {
position:relative;
filter: blur(3px);
}
img.hvrimg2:hover {
position:relative;
filter: blur(0px);
-moz-transform: translate(10px, -0px);
-ms-transform: translate(10px, -0px);
-o-transform: translate(10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(10px, -0px);
}
希望这能帮助您创建同时作用于两个图像的悬停效果。
英文:
I am trying to create this hover effect using CSS only but can also use JavaScript if needed.
I was able to create the layout in HTML and effect a hover state on each image individually but not able to create a hover the effects both images at once and in opposite ways.
This is what I tried and it worked on each image individually but I need both images to change simultaneously.
#wrap img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
img.hvrimg1 {
position:relative;
bottom:180px;
left: 260px;
z-index: 1;
}
img.hvrimg1:hover {
position:relative;
filter: blur(3px);
-moz-transform: translate(-10px, -0px);
-ms-transform: translate(-10px, -0px);
-o-transform: translate(-10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(-10px, -0px)
}
img.hvrimg2 {
position:relative;
filter: blur(3px);
}
img.hvrimg2:hover {
position:relative;
filter: blur(0px);
-moz-transform: translate(10px, -0px);
-ms-transform: translate(10px, -0px);
-o-transform: translate(10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(10px, -0px)
}
答案1
得分: 1
I figured it out.
<style type="text/css">
#wraphvrimg img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
.section {
background: #ffff;
width: 850px;
overflow: hidden
}
.section img.hvrimg1 {
filter: blur(0px);
position: relative;
bottom: 180px;
left: 20px;
z-index: 1;
}
.section:hover img.hvrimg1 {
filter: blur(3px);
transform: translate(-20px, -0px)
}
.section img.hvrimg2 {
filter: blur(3px);
position: relative;
right: 240px;
}
.section:hover img.hvrimg2 {
filter: blur(0px);
transform: translate(20px, 0px)
}
</style>
</head><body>
<div id="wraphvrimg" class="section"> <img src="Rectangle 5.png" alt="" width="411" height="253" class="hvrimg1"/> <img src="Rectangle 4.png" width="418" height="493" alt="" class="hvrimg2" > </div>
</body>
</html>
英文:
I figured it out.
<html>
<style type="text/css">
#wraphvrimg img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
.section {
background: #ffff;
width: 850px;
overflow: hidden
}
.section img.hvrimg1 {
filter: blur(0px);
position: relative;
bottom: 180px;
left: 20px;
z-index: 1;
}
.section:hover img.hvrimg1 {
filter: blur(3px);
transform: translate(-20px, -0px)
}
.section img.hvrimg2 {
filter: blur(3px);
position: relative;
right: 240px;
}
.section:hover img.hvrimg2 {
filter: blur(0px);
transform: translate(20px, 0px)
}
</style>
</head><body>
<div id="wraphvrimg" class="section"> <img src="Rectangle 5.png" alt="" width="411" height="253" class="hvrimg1"/> <img src="Rectangle 4.png" width="418" height="493" alt=""/ class="hvrimg2" > </div>
</body>
</html>
答案2
得分: 0
在我的示例中，#wrap 是您的图像/父容器，正如您可以看到，您可以在父容器悬停时针对每个图像，对图像进行任何操作。我相信您可以从这里弄清楚剩下的部分。
<div id="wrap">
<div class="image-1">图像 1</div>
<div class="image-2">图像 2</div>
</div>
#wrap:hover .image-1 {
color: 红色;
}
#wrap:hover .image-2 {
color: 绿色;
}
英文:
In my example, #wrap is your image/parent container, and as you can see you can target each image on hover of the parent and you can do whatever you want to the image. I am sure you can figure out the rest from here.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#wrap:hover .image-1 {
color: red;
}
#wrap:hover .image-2 {
color: green;
}
<!-- language: lang-html -->
<div id="wrap">
<div class="image-1">image 1</div>
<div class="image-2">image 2</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论