Hiệu ứng Cho ảnh - TuongAds

Tổng hợp các hiệu ứng cho hình ảnh, sử dụng cho website đẹp hơn – long lanh, lung linh hơn nhé

Ánh sáng quét qua khi hover vào ảnh

HTML

<div class="box"> <img src="https://dummyimage.com/500x350/0099ff/000000.png" </div>

123	<div class="box"><img src="https://dummyimage.com/500x350/0099ff/000000.png"</div>

CSS

body{ background:#000 } .box{ position:relative; overflow:hidden; display: inline-block; background:#000 } .box:before { position:absolute; top:0; left:-75%; z-index:2; display:block; content:''; width:50%; height:100%; background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); transform:skewX(-25deg); } .box:hover:before { animation:shine .75s; } @keyframes shine { 0% {left: -75%} 100% {left: 120%;} }

1234567891011121314151617181920212223242526272829

body{background:#000}.box{position:relative;overflow:hidden;display:inline-block;background:#000}.box:before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:linear-gradient(toright,rgba(255,255,255,0)0%,rgba(255,255,255,0.3)100%);transform:skewX(-25deg);}.box:hover:before{animation:shine.75s;} @keyframesshine{0%{left:-75%}100%{left:120%;}}

Nguồn: https://codepen.io/shlomy/pen/NzxbRW

Ánh sáng quét qua nhanh + lệch hình

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <a href="#" class="photo"> <h1>Amber Heard</h1> <img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg" /> <div class="glow-wrap"> <i class="glow"></i> </div> </a> <a href="http://tiagoalexandrelopes.com/" target="_blank" id="author">About me</a>

123456789101112

<link href="https://fonts.googleapis.com/css?family=Montserrat"rel="stylesheet"> <ahref="#"class="photo"><h1>Amber Heard</h1><img src="https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg"/><div class="glow-wrap"><iclass="glow"></i></div></a> <ahref="http://tiagoalexandrelopes.com/"target="_blank"id="author">About me</a>

CSS

body{ background: rgba(218,218,218,1) } a{ color: #111 } .photo{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } .photo img{ width: 200px; height: 280px; object-fit: cover; filter: grayscale(100%) contrast(120%); box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2); display: block; transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1); margin-top: -10px; } .photo:hover img{ box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1); } .photo .glow-wrap{ overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; margin-top: -10px; } .photo .glow{ display: block; position:absolute; width: 40%; height: 200%; background: rgba(255,255,255,.2); top: 0; filter: blur(5px); transform: rotate(45deg) translate(-450%, 0); transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1); } .photo:hover .glow{ transform: rotate(45deg) translate(450%, 0); transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1); } .photo:hover img, .photo:hover .glow-wrap{ margin-top: 0; } h1{ position: absolute; z-index: 1; transform: translate(-25%, -65%); font-family: 'Montserrat', sans-serif; margin: 0; line-height: 1.2; } /* Ends */ #author{ font-family: Helvetica, Arial; text-transform: uppercase; font-size: 14px; text-decoration: none; position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); color: #888; } #author:hover{ color: #111; }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889

body{background:rgba(218,218,218,1)} a{color:#111} .photo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;} .photo img{width:200px;height:280px;object-fit:cover;filter:grayscale(100%)contrast(120%);box-shadow:10px15px25px0rgba(0,0,0,.2);display:block;transition:all.5scubic-bezier(0.645,0.045,0.355,1);margin-top:-10px;} .photo:hoverimg{box-shadow:1px1px10px0rgba(0,0,0,.1);} .photo.glow-wrap{overflow:hidden;position:absolute;width:100%;height:100%;top:0;margin-top:-10px;} .photo.glow{display:block;position:absolute;width:40%;height:200%;background:rgba(255,255,255,.2);top:0;filter:blur(5px);transform:rotate(45deg)translate(-450%,0);transition:all.5scubic-bezier(0.645,0.045,0.355,1);} .photo:hover.glow{transform:rotate(45deg)translate(450%,0);transition:all1scubic-bezier(0.645,0.045,0.355,1);} .photo:hover img,.photo:hover.glow-wrap{margin-top:0;} h1{position:absolute;z-index:1;transform:translate(-25%,-65%);font-family:'Montserrat',sans-serif;margin:0;line-height:1.2;} /* Ends */ #author{font-family:Helvetica,Arial;text-transform:uppercase;font-size:14px;text-decoration:none;position:fixed;bottom:25px;left:50%;transform:translateX(-50%);color:#888;} #author:hover{color:#111;}

Nguồn: https://codepen.io/TiagoLopes/pen/vZBMWB

Image Scrolling Hover

Khi di chuột vào ảnh, ảnh sẽ chạy từ phần đầu ảnh xuống cuối ảnh

Hiệu ứng này phù hợp dùng với những ảnh bìa catalog, giao diện website có chiều cao lớn hơn nhiều so với chiều rộng.

HTML

<div class="nz"> <div class="box"> <img width="500px" height="auto" src="https://s-media-cache-ak0.pinimg.com/736x/ca/ea/57/caea57268e1dee696f3c20a5a0f895f2.jpg" style="top: 0px" /> </div>

1234	<div class="nz"><div class="box"><img width="500px"height="auto"src="https://s-media-cache-ak0.pinimg.com/736x/ca/ea/57/caea57268e1dee696f3c20a5a0f895f2.jpg"style="top: 0px"/></div>

CSS

* {background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);} .nz { height: 400px; width: 500px; border: 5px solid #333; overflow: hidden; margin: 25px auto; } .box { width: 100%; margin: 0px auto; -webkit-animation-name: move; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: right; -webkit-animation-timing-function: linear; -webkit-animation-play-state: paused; } .box:hover { -webkit-animation-play-state: running; } @-webkit-keyframes move { 0% { margin-top: 0px; } 80% { margin-top: -100%; } 100% { margin-top: -100%; } }

1234567891011121314151617181920212223242526272829

*{background-image:linear-gradient(120deg,#a6c0fe 0%, #f68084 100%);}.nz{height:400px;width:500px;border:5pxsolid#333;overflow:hidden;margin:25pxauto;}.box{width:100%;margin:0pxauto;-webkit-animation-name:move;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:right;-webkit-animation-timing-function:linear;-webkit-animation-play-state:paused;}.box:hover{-webkit-animation-play-state:running;}@-webkit-keyframesmove{0%{margin-top:0px;}80%{margin-top:-100%;}100%{margin-top:-100%;}}

Nguồn: https://codepen.io/NzNcn/pen/mWOrrW

Và còn rất nhiều hiệu ứng hay ho, hãy xem tại đây nhé

Chúc bạn vui vẻ.