psikolele
New Coder
Hello everyone, i'm a neophyte with coding and i have a trouble with this code:
Transition doesn't work in any browser. I tried to put -webkit- property, but with no results.
Someone can help me, please?
The code is here.
[CODE lang="css" title="Transition effect"]<style type="text/css">
.image {
background-size: cover;
height: 100%;
width: 100%;
-webkit-transition: all 0.5s;
}
.image::before {
content: "";
height: 100%;
width: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
}
.img-container:hover .image,
.img-container:hover .image,
{
-webkit-transform: scale(1.3) rotate(-5deg);
display: block;
opacity: 0.5;
}
.img-container {
position: relative;
height: 300px;
width: 400px;
overflow: hidden;
-webkit-transition: all 0.35s;
cursor: pointer;
}
</style>
[/CODE]
Transition doesn't work in any browser. I tried to put -webkit- property, but with no results.
Someone can help me, please?
The code is here.
[CODE lang="css" title="Transition effect"]<style type="text/css">
.image {
background-size: cover;
height: 100%;
width: 100%;
-webkit-transition: all 0.5s;
}
.image::before {
content: "";
height: 100%;
width: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
}
.img-container:hover .image,
.img-container:hover .image,
{
-webkit-transform: scale(1.3) rotate(-5deg);
display: block;
opacity: 0.5;
}
.img-container {
position: relative;
height: 300px;
width: 400px;
overflow: hidden;
-webkit-transition: all 0.35s;
cursor: pointer;
}
</style>
[/CODE]