Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Vagrantin/c4cd27b93052a4af3a819c5cd7a19741 to your computer and use it in GitHub Desktop.
Save Vagrantin/c4cd27b93052a4af3a819c5cd7a19741 to your computer and use it in GitHub Desktop.
CSS & Javascript animation

CSS & Javascript animation

Small CSS Animation which zoom out in a pic and add text on it.

A Pen by Matth on CodePen.

License.

<section class="voyages">
<a id="img_txt" class="anchorvyge" href="#">
<img class="imgvyge" src="https://unsplash.it/600/900/?random" alt="vyge1"></img>
<p id="toto" class="text">YOPYOP</p>
</a>
</section>
var x = document.getElementById("img_txt");
// if (x) {
x.addEventListener("mouseover", func, false);
x.addEventListener("mouseout", func1, false);
// }
function func()
{
document.getElementById("toto").setAttribute("style", "display:block;")
}
function func1()
{
document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {
height: 400px;
width: 100%;
margin: 0 auto;
padding: 20px 0px 10px 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img.imgvyge {
border-radius: 50%;
object-fit: cover;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
margin: auto 30px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.imgvyge:hover {
width: 400px;
height:400px;
}
p.text {
display: none;
z-index:100;
position:relative;
color:black;
font-size:24px;
font-weight:bold;
left:130px;
bottom:160px;
/*-webkit-transition: all 0.7s ease;*/
transition: all 0.7s ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment