IMAGE ZOOM EFFECT ANIMATION IN CSS – BRACKETS Turkish Video Tutorial
In this Brackets Turkish Tutorial, I will show you zoom effect animation for image in Brackets. This animation, grows the picture when mouse comes on the image. At the same time the writing moves up and down.
Bugünkü Brackets derleyici dersimde resim galerilerinde ya da haber sitelerinde sıklıkla kullanılan resmin üzerine geldiğinizde resminizi yaklaştırmayı sağlayan efektin yapımını göstereceğim.
Aynı Html sayfası içerisine Css kodlarını yazarak yine farklı bir şekilde efekt yapımını öğretmiş olacağım. Hadi videomuza geçelim..
Kaynak zoomeffects.html
<!DOCTYPE html>
<html en>
<head>
<title>IMAGE ZOOM EFFECT</title>
<meta charset="utf-8">
<style>
*{
background-image: url(arka.jpg);
}
.main{
margin: 100px;
width: 500px;
height: 500px;
position: absolute;
cursor: pointer;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
transition: all 1s ease-in;
}
span{
margin: 2px;
color: chartreuse;
position: absolute;
bottom: 100px;
left: 30px;
right: 0px;
font-family: monospace;
font-size: 45px;
padding: 3px 0px;
font-weight: bold;
transform: translateY(50px);
opacity: 1;
transition: all 1s ease-in;
}
.main:hover img{
transform: scale(1.4);
transition: all 1s ease-in;
filter: brightness(.5);
}
.main:hover span{
font-size: 30px;
opacity: 1;
transform: translateY(-200px);
transition: all 1s ease-in;
}
</style>
</head>
<body>
<div class="main">
<img src="image1.jpg" alt="">
<span>IMAGE ZOOM EFFECT</span>
</div>
</body>
</html>
Bir sonraki aşamada görüşmek üzere…
Githup link: BRACKETS
Web Sitesi: BRACKETS
Posted on Utopian.io - Rewarding Open Source Contributors
Ellerine sağlık abi
Teşekkür ederim
Rica etsem bana da bir gül yapabilir misin? ancak 14 Şubat'a kadar yetişir değil mi? :)))))
Dost sen iste Güller Sultanın bahçesindeki gülleri tasvir edeyim elimden geldiğince :))
Valla mı? Yapar mısın kardeşine böyle bir güzellik, sen bir tanesin. :)
Elimden gelirse ilk fırsatta :))
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you...
Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x