So…I have this piece of code. I try to create a fading in effect of a text over my image, but I dont know why it doesn’t work.
Can anyone explain to me what am I doing wrong?
Here is the code:
.imagine{
height: 300px;
width: 300px;
margin: 50px;
border-radius: 50%;
}
.text{
font-family: Oswald;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background:#00628B ;
color: ##15BBFF;
opacity:0;
transition:1s;
}
.imagine:hover .text{
opacity: 1;
}
.imagine-pozitie{
position: relative;
display: inline-block;
text-align: center;
}<div class="imagine-pozitie">
<div class="text">
O ORA
<div class="">
50 DE LEI
</div>
</div>
<img class="imagine" src="poze_site/rec.png" alt="">
<img class="imagine" src="poze_site/rec.png" alt="">
<img class="imagine" src="poze_site/rec.png" alt="">
</div>>Solution :
Your code was actually working, you just applied the hover to the wrong declaration….imagine:hover .text should be .imagine-pozitie:hover .text…I fixed it in snippet below (obviously with placeholder images) 🙂
body {
padding: 72px;
margin: 0 auto;
font-family: sans-serif;
;
}
.imagine {
width: 300px;
height: 300px;
margin: 50px;
border-radius: 50%;
}
.text {
font-family: Oswald, sans-serif;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: #00628B;
color: #15BBFF;
opacity: 0;
transition: all 1s;
}
.imagine-pozitie:hover .text {
font-family: Oswald, sans-serif;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: #00628B;
color: #15BBFF;
opacity: 0;
transition: all 1s;
opacity: 1;
}
.imagine-pozitie {
position: relative;
display: inline-block;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="imagine-pozitie">
<div class="text">
O ORA
<div class="">
50 DE LEI
</div>
</div>
<img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
<img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
<img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
</div></body>
</html>