Css How to transition a background image over an actual image?
Question
I have an image that I want to show a curtain effect from center when the user hovers over the image. After they hover I want to show Text on top of the new background.
As you can see from the snippet the first box does what I am expecting minus the text. The second box has the actual image but the animation doesn't work
.box { width: 100px; height: 100px; display:inline-block; transition: 1s; }.to-center{ background: linear-gradient(black,black) no-repeat, red; background-size: 100% 100%; background-position:center; }.to-center:hover { background-size: 0% 100%; /* Or 100% 0% */ }.from-center{ background: linear-gradient(red,red) no-repeat, black; background-size: 0% 100%; /* Or 100% 0% */ background-position:center; }.from-center:hover { background-size: 100% 100%; }.from-center:hover:after{ bottom: 0; left: 15px; content:"Hi I am After"; }
<div class="box from-center"></div> <br/> <div class="box from-center"> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg"> </div>
3 answers
solution1
1 ACCPTED 2020-04-15 13:34:08
Split the image between Two Elements in this case i used pseudo-Elements and have the same effect.
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: url(https://i.picsum.photos/id/163/200/200.jpg); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box>Some text to show</div>
Edit: to make this dynamic we can make use of css variables.
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: var(--data-img); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box style="--data-img:url(https://i.picsum.photos/id/163/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/164/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/165/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/166/200/200.jpg)">Some text to show</div>
solution2
0 2020-04-15 13:06:24
I think I would use pseudo elements to create the cover like:
.reveal { position: relative; display: inline-block; border: 1px solid; }.reveal img { display: block; }.reveal::before, .reveal::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: black; -webkit-transition: 1s; transition: 1s; }.reveal::before { -webkit-transform-origin: left center; transform-origin: left center; left: 0; }.reveal::after { -webkit-transform-origin: right center; transform-origin: right center; right: 0; }.reveal:hover::before, .reveal:hover::after { -webkit-transform: scaleX(0); transform: scaleX(0); }.reveal p { -webkit-transition: 1s 1s; transition: 1s 1s; opacity: 0; }.reveal:hover p { opacity: 1; }
<div class="reveal"> <p>SOME TEXT</p> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg" /> </div>
solution3
-2 2020-04-15 13:13:20
You can get this basic functionality with Jquery, a little custom JS and a little bit of CSS.
Here is the basic HTML as a starting point.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My first website</title>
<link rel="stylesheet" href="css-01/css/styles.css">
</head>
<body>
<input id="btn01" type="button" value="Animate" onclick="animation(); hideText();" />
<h1>Here is some heading to animate when you press the button.</h1>
<img src="01.jpg" id="image01" alt="Smiley face" height="750" width="500">
<img src="02.jpg" id="image02" alt="Smiley face" height="750" width="500">
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</html>
You have your two images, you have your jquery which your are going to use for the animation effect and you have a button that is going to call the function when pressed.
You can off course have various event triggers for this effect, hover is another option, lets go with the click event handler
In your custom css you then must make the position property of the first image absolute. This has the effect of removing it from the Document Model.
You then set the position property of the second image to relative. You must also then give the first image a z-index of less than the second image.
#image01 {
position: absolute;
z-index: -1
}
#image02 {
position: relative;
z-index: 1
}
You then simply just create function that is to be called when the button is clicked (from your custom JS file).
function animation() {
$("#image02").fadeToggle("slow");
}
function hideText() {
$("h1").toggle("slow");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.