Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] css image hover effects

Tác giả: - vào lúc:
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
11/12/2016, 13:54
#1

Chia sẻ một số css hiệu hứng khi chỉ chuột vào ảnh - css image hover effects


[Code] css image hover effects Ga4CzUY

Dạo gần đây mình có làm mấy cái shop vì vậy có tìm kiếm 1 số css có sẵn để làm hiệu ứng khi chỉ chuột vào ảnh. rất thích hợp cho những site nào hay sử dụng ảnh là chủ yếu

https://jsfiddle.net/vietkanpy/vc6uh8ho/1/

Cách dùng rất dễ

ví dụ như:

Code:

<div class="column class">
 <div>
 <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg"></figure>
 <span>Hover</span>
 </div>
 
 </div>


Trong đoạn class="column class" thì chúng ta thay bằng class hiệu ứng là được ví dụ như hover03 dưới đây. đây là 1 trong các hiệu ứng, bạn muốn hiệu ứng khác thì kéo xuống css cuối cùng là tổng các hiệu ứng

Code:

/* Zoom Out #1 */
.hover03 figure img {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover03 figure:hover img {
 -webkit-transform: scale(1);
 transform: scale(1);
}



Còn đây là css lưu trữ nhằm codepen xóa mất

Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
 color: #333;
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
}
h1,
h1+p {
 margin: 30px 15px 0;
 font-weight: 300;
}
h1+p a {
 color: #333;
}
h1+p a:hover {
 text-decoration: none;
}
h2 {
 margin: 60px 15px 0;
 padding: 0;
 font-weight: 300;
}
h2 span {
 margin-left: 1em;
 color: #aaa;
 font-size: 85%;
}
.column {
 margin: 15px 15px 0;
 padding: 0;
}
.column:last-child {
 padding-bottom: 60px;
}
.column::after {
 content: '';
 clear: both;
 display: block;
}
.column div {
 position: relative;
 float: left;
 width: 300px;
 height: 200px;
 margin: 0 0 0 25px;
 padding: 0;
}
.column div:first-child {
 margin-left: 0;
}
.column div span {
 position: absolute;
 bottom: -20px;
 left: 0;
 z-index: -1;
 display: block;
 width: 300px;
 margin: 0;
 padding: 0;
 color: #444;
 font-size: 18px;
 text-decoration: none;
 text-align: center;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 opacity: 0;
}
figure {
 width: 300px;
 height: 200px;
 margin: 0;
 padding: 0;
 background: #fff;
 overflow: hidden;
}
figure:hover+span {
 bottom: -36px;
 opacity: 1;
}



/* Zoom In #1 */
.hover01 figure img {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover01 figure:hover img {
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
 width: 300px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover02 figure:hover img {
 width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover03 figure:hover img {
 -webkit-transform: scale(1);
 transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
 width: 400px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover04 figure:hover img {
 width: 300px;
}

/* Slide */
.hover05 figure img {
 margin-left: 30px;
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover05 figure:hover img {
 margin-left: 0;
}

/* Rotate */
.hover06 figure img {
 -webkit-transform: rotate(15deg) scale(1.4);
 transform: rotate(15deg) scale(1.4);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover06 figure:hover img {
 -webkit-transform: rotate(0) scale(1);
 transform: rotate(0) scale(1);
}

/* Blur */
.hover07 figure img {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover07 figure:hover img {
 -webkit-filter: blur(0);
 filter: blur(0);
}

/* Gray Scale */
.hover08 figure img {
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover08 figure:hover img {
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
}

/* Sepia */
.hover09 figure img {
 -webkit-filter: sepia(100%);
 filter: sepia(100%);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover09 figure:hover img {
 -webkit-filter: sepia(0);
 filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 figure img {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover10 figure:hover img {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover11 figure:hover img {
 opacity: .5;
}

/* Opacity #2 */
.hover12 figure {
 background: #1abc9c;
}
.hover12 figure img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover12 figure:hover img {
 opacity: .5;
}

/* Flashing */
.hover13 figure:hover img {
 opacity: 1;
 -webkit-animation: flash 1.5s;
 animation: flash 1.5s;
}
@-webkit-keyframes flash {
 0% {
 opacity: .4;
 }
 100% {
 opacity: 1;
 }
}
@keyframes flash {
 0% {
 opacity: .4;
 }
 100% {
 opacity: 1;
 }
}

/* Shine */
.hover14 figure {
 position: relative;
}
.hover14 figure::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14 figure:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
 100% {
 left: 125%;
 }
}
@keyframes shine {
 100% {
 left: 125%;
 }
}

/* Circle */
.hover15 figure {
 position: relative;
}
.hover15 figure::before {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 display: block;
 content: '';
 width: 0;
 height: 0;
 background: rgba(255,255,255,.2);
 border-radius: 100%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 opacity: 0;
}
.hover15 figure:hover::before {
 -webkit-animation: circle .75s;
 animation: circle .75s;
}
@-webkit-keyframes circle {
 0% {
 opacity: 1;
 }
 40% {
 opacity: 1;
 }
 100% {
 width: 200%;
 height: 200%;
 opacity: 0;
 }
}
@keyframes circle {
 0% {
 opacity: 1;
 }
 40% {
 opacity: 1;
 }
 100% {
 width: 200%;
 height: 200%;
 opacity: 0;
 }
}

Tags: #code #css #image-hover-effects