Hiệu ứng cho ảnh

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>

<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%;}
}

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%;}

}

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>

<h1>Amber Heard</h1>

</div>

</a>

<a href="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;
}

body{

background: rgba(218,218,218,1)

}

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;

}

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>

</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%;    }
    }

* {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%; }

}

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ẻ.

Hướng dẫn

Hiệu ứng cho ảnh

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

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

Image Scrolling Hover

Để lại một bình luận Hủy

Main Headline

Smaller Headline

ĐĂNG KÝ NHẬN TƯ VẤN