background-image hover css issue
Question
I am trying to have a simple mouse hover effect on those two pictures but it doesn't work. Could someone help me?
I would need a fade transition when the mouse is over the pictures. Thank you very much!
* { padding: 0; margin: 0; } html, body { height: 100%; } .body { height: 100vh; text-align: center; } .square { width: 100vm; height: 100vm; /* For IE9 */ width: 100vmin; height: 100vmin; display: inline-block; vertical-align: middle; margin-top: calc((100vh - 100vmin) / 2); background-color: #eee; font-size: 0; } .square:before { content: ""; height: 100%; } .square:before, .content { display: inline-block; vertical-align: middle; } #left-content { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content { background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:after { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content:after { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:hover:after { opacity:1; } #right-content:hover:after { opacity:1; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style_intro.css"> </head> <body> <div class="body"> <div class="square"> <div class="content"> <a href="http://www.google.com"><div id="left-content"></div></a> <a href="http://www.yahoo.com"><div id="right-content"></div></a> </div> </div> </div> </body> </html>
5 answers
solution1
2 ACCPTED 2017-04-20 09:04:20
Use content:''; in psuedo-elements to display the element
* { padding: 0; margin: 0; } html, body { height: 100%; } .body { height: 100vh; text-align: center; } .square { width: 100vm; height: 100vm; /* For IE9 */ width: 100vmin; height: 100vmin; display: inline-block; vertical-align: middle; margin-top: calc((100vh - 100vmin) / 2); background-color: #eee; font-size: 0; } .square:before { content: ""; height: 100%; } .square:before, .content { display: inline-block; vertical-align: middle; } #left-content { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content { background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:after { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; opacity:0; content:''; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content:after { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; opacity:0; content:''; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:hover:after { opacity:1; } #right-content:hover:after { opacity:1; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style_intro.css"> </head> <body> <div class="body"> <div class="square"> <div class="content"> <a href="http://www.google.com"><div id="left-content"></div></a> <a href="http://www.yahoo.com"><div id="right-content"></div></a> </div> </div> </div> </body> </html>
solution2
1 2017-04-20 09:04:42
You almost got it, you're just missing the content: ' ' attribute on the ::after and ::before pseudo selector.
* { padding: 0; margin: 0; } html, body { height: 100%; } .body { height: 100vh; text-align: center; } .square { width: 100vm; height: 100vm; /* For IE9 */ width: 100vmin; height: 100vmin; display: inline-block; vertical-align: middle; margin-top: calc((100vh - 100vmin) / 2); background-color: #eee; font-size: 0; } .square:before { content: ""; height: 100%; } .square:before, .content { display: inline-block; vertical-align: middle; } #left-content { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content { background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:after { content: ' '; background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content:after { content: ' '; background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:hover:after { opacity:1; } #right-content:hover:after { opacity:1; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style_intro.css"> </head> <body> <div class="body"> <div class="square"> <div class="content"> <a href="http://www.google.com"><div id="left-content"></div></a> <a href="http://www.yahoo.com"><div id="right-content"></div></a> </div> </div> </div> </body> </html>
solution3
0 2017-04-20 09:07:11
You dont need to write a large css for this . A simple :hover and background transition can do the trick. Here is the updated code:
* { padding: 0; margin: 0; } html, body { height: 100%; } .body { height: 100vh; text-align: center; } .square { width: 100vm; height: 100vm; /* For IE9 */ width: 100vmin; height: 100vmin; display: inline-block; vertical-align: middle; margin-top: calc((100vh - 100vmin) / 2); background-color: #eee; font-size: 0; } .square:before { content: ""; height: 100%; } .square:before, .content { display: inline-block; vertical-align: middle; } #left-content { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; transition: background-image 0.5s; -webkit-transition: background-image 0.5s; -moz-transition: background-image 0.5s; } #left-content:hover { background-image: url("https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg"); } #right-content { background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; transition: background-image 0.5s; -webkit-transition: background-image 0.5s; -moz-transition: background-image 0.5s; } #right-content:hover { background-image: url("https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg"); }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style_intro.css"> </head> <body> <div class="body"> <div class="square"> <div class="content"> <a href="http://www.google.com"><div id="left-content"></div></a> <a href="http://www.yahoo.com"><div id="right-content"></div></a> </div> </div> </div> </body> </html>
solution4
0 2017-04-20 09:09:27
change only below css
#left-content:hover {
opacity:0.2;
}
#right-content:hover {
opacity:0.2;
}
solution5
0 2017-04-20 09:11:08
Try this:
You just missed content:'';
* { padding: 0; margin: 0; } html, body { height: 100%; } .body { height: 100vh; text-align: center; } .square { width: 100vm; height: 100vm; /* For IE9 */ width: 100vmin; height: 100vmin; display: inline-block; vertical-align: middle; margin-top: calc((100vh - 100vmin) / 2); background-color: #eee; font-size: 0; } .square:before { content: ""; height: 100%; } .square:before, .content { content:""; display: inline-block; vertical-align: middle; } #left-content { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content { background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:after { content:""; background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:left; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #right-content:after { content:""; background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); background-size: cover; width:50vmin; height: 100vmin; float:right; opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #left-content:hover:after{ opacity:1; } #right-content:hover:after{ opacity:1; }
<div class="body"> <div class="square"> <div class="content"> <a href="http://www.google.com"><div id="left-content"></div></a> <a href="http://www.yahoo.com"><div id="right-content"></div></a> </div> </div> </div>
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.
Related Question
Css background-image issue
CSS background-image alignment issue
CSS background-image issue for <select> & <option>
With CSS, can I increase the contrast of background-image upon hover?
CSS background-image cover div when rotateY on hover
Resizing a background-image using pure css inside a class:hover
CSS background-image repeat on hover over anchor tag
change css background-image svg paint behavior on hover?
background-image hover state
background-image change on hover
Related Tags