background-image hover css numéro

J'essaie d'avoir un effet de survol de souris simple sur ces deux images, mais cela ne fonctionne pas. Quelqu'un pourrait-il m'aider?background-image hover css numéro

J'aurais besoin d'une transition de fondu lorsque la souris est sur les images. Merci beaucoup!

* { 
 
    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'); \t 
 
    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 { 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:left; 
 
\t opacity:0; 
 
\t -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 { 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:right; 
 
\t opacity:0; 
 
\t -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 { 
 
\t opacity:1; 
 
} 
 
#right-content:hover:after { 
 
\t 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"> 
 
\t <a href="http://www.google.com"><div id="left-content"></div></a> 
 
\t <a href="http://www.yahoo.com"><div id="right-content"></div></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-04-20 yoan26

que vous voulez effacer l'image dans le vol stationnaire? image sur l'image? –

Je vous ai donné une réponse très simple sans écrire beaucoup de css .. vous n'avez pas besoin d'utiliser des pseudo-éléments: après: avant ... juste un simple CSS peut le faire. –

Utilisation content:''; dans les éléments Psuedo à afficher l'élément

* { 
 
    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'); \t 
 
    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 { 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:left; 
 
\t opacity:0; 
 
    content:''; 
 
\t -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 { 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:right; 
 
\t opacity:0; 
 
    content:''; 
 
\t -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 { 
 
\t opacity:1; 
 
} 
 
#right-content:hover:after { 
 
\t 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"> 
 
\t <a href="http://www.google.com"><div id="left-content"></div></a> 
 
\t <a href="http://www.yahoo.com"><div id="right-content"></div></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-04-20 09:04:20 Enthiran

Merci beaucoup !!!! :) – yoan26

Vous presque l'avez, vous manque juste l'content: ' ' attribut le pseudo-sélecteur :: after et :: before.

* { 
 
    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'); \t 
 
    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: ' '; 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:left; 
 
\t opacity:0; 
 
\t -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: ' '; 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:right; 
 
\t opacity:0; 
 
\t -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 { 
 
\t opacity:1; 
 
} 
 
#right-content:hover:after { 
 
\t 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"> 
 
\t <a href="http://www.google.com"><div id="left-content"></div></a> 
 
\t <a href="http://www.yahoo.com"><div id="right-content"></div></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-04-20 09:04:42 l3fty

Vous ne avez pas besoin d'écrire un grand css pour cela. Une transition simple: survol et arrière-plan peut faire l'affaire. Voici le code mis à jour:

* { 
 
    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'); \t 
 
    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 { 
 
\t 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 { 
 
\t 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"> 
 
\t <a href="http://www.google.com"><div id="left-content"></div></a> 
 
\t <a href="http://www.yahoo.com"><div id="right-content"></div></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-04-20 09:07:11

changement seulement au-dessous css

#left-content:hover { 
    opacity:0.2; 
} 
#right-content:hover { 
    opacity:0.2; 
}

Source

2017-04-20 09:09:27

Essayez ceci:

Vous venez de manquer 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'); \t 
 
    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:""; 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:left; 
 
\t opacity:0; 
 
\t -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:""; 
 
\t background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg'); 
 
\t background-size: cover; 
 
\t width:50vmin; 
 
\t height: 100vmin; 
 
\t float:right; 
 
\t opacity:0; 
 
\t -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{ 
 
\t opacity:1; 
 
} 
 
#right-content:hover:after{ 
 
\t opacity:1; 
 
}

<div class="body"> 
 
    <div class="square"> 
 
    <div class="content"> 
 
\t <a href="http://www.google.com"><div id="left-content"></div></a> 
 
\t <a href="http://www.yahoo.com"><div id="right-content"></div></a> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-04-20 09:11:08 LKG

background-image hover css numéro

Répondre

Questions connexes