[英]How can I make hover box on the right side of my div?
I'm trying to modify this code, so the box would slide to the left side of the box. 我正在尝试修改此代码,因此框将滑到框的左侧。 I was thinking that I should just change in class .overlay
right: 0;
我当时以为我应该只在课堂上改.overlay
right: 0;
to right: 100%;
right: 100%;
, but its not doing anything. ,但是它什么也没做。 It should look like this
它应该看起来像这样
Also What should I do when when the box slides to the right side and I hover my mouse to it my box stays until I move my mouse away, how can I fix it?
另外,当盒子滑到右侧并且将鼠标悬停在它上面时,我应该怎么办,直到我将鼠标移开时,该如何解决?
Here is the css code when I did tha animation to the right side: 这是我在右侧做动画时的CSS代码:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Use this code to move the overlay to left on hover 使用此代码将叠加层在悬停时向左移动
.overlay {
position: absolute;
bottom: 0;
left: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: -100%;
}
.container { position: relative; width: 50%; float:right; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; background-color: #008CBA; overflow: hidden; width: 0; height: 100%; transition: .5s ease; } .container:hover .overlay { width: 100%; left: -100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
<h2>Slide in Overlay from the Right</h2> <p>Hover over the image to see the effect.</p> <div class="container"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div>
Is this what you're trying to do? 这是您要做什么? https://codepen.io/anon/pen/MmNXmN
https://codepen.io/anon/pen/MmNXmN
HTML 的HTML
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS 的CSS
.container {
position: relative;
width: 50%;
float: right;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.