You are not connected. Please login or register

Diễn Đàn Hỗ Trợ FM  » Advanced Search

Tìm thấy 4 mục

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


Topics tagged under css on Diễn Đàn Hỗ Trợ FM  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
Search in: Tips/Tool Bootstrap  Chủ đề: [Code] css image hover effects  Trả lời: 0  Xem: 903
Demo:
Topics tagged under css on Diễn Đàn Hỗ Trợ FM  Bgd_note

CSS:
Code:
    #text_editor_textarea {
        background: url("http://stc.ugc.zdn.vn/qa/v30/images/bgd_note.gif") no-repeat scroll center center transparent;
    }

    select, textarea {
        border-width: 1px;
    }

Tags: #code #warning #comment #post #bình-luận #css #bài-viết #khuyến-cáo #khung
Search in: Code Forumotion  Chủ đề: [Code] Khung khuyến cáo ở nơi comment bài viết  Trả lời: 1  Xem: 4791
Demo:
Topics tagged under css on Diễn Đàn Hỗ Trợ FM  RJDGXrO
Code:

    body
    {
    background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;
    animation:mybirst 25s infinite;
    animation-delay:5s;
    -moz-animation-delay:5s; /* Firefox */
    -webkit-animation-delay:5s; /*Safari and Chrome */
    -moz-animation:mybirst 25s infinite; /* Firefox */
    -webkit-animation:mybirst 25s infinite; /* Safari and Chrome */
    }

    @keyframes mybirst

    {
    0%  {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
    33%  {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
    66%  {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
    100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

    }

    @-moz-keyframes mybirst /* Firefox */

    {
    0%  {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
    33%  {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
    66%  {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
    100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

    }

    @-webkit-keyframes mybirst /* Safari and Chrome */

    {
    0%  {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
    33%  {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
    66%  {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
    100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

    }



Tags: #code #hình-ảnh #background #nền #hình #css
Search in: Code Forumotion  Chủ đề: [Code] Thay Background liên tục  Trả lời: 0  Xem: 4032
Update Font Awesome version 5.0.8

Topics tagged under css on Diễn Đàn Hỗ Trợ FM  Mc37LfU

--Chi tiết: Font Awesome là một công cụ tuyệt vời để bạn tạo giao diện website, có hơn 2481 icon cho bạn lựa chọn, chỉ cần tích hợp css và font vào là sử dụng, không cần đến javascript hoặc những cái gì cao siêu.

--Cài đặt: Để cài Font Awesome vào forum của bạn, hãy vào overall_header và đưa đoạn code này vào:

Code:
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

--Cách tìm icon: 
Để tìm tất cả các loại icon của Font Awesome, các bạn vào mục icon của nó:fontawesome.com/icons

--Ví dụ: muốn add icon 3 dấu gạch ngang giống như wap thì ta đặt code:

Code:
<i class="fa fa-star"></i>




#codefm

#codefm

Tags: #icon #css #beautiful
Search in: Rank, Button, Icon,...  Chủ đề: [Icon] Font Awesome 5.0.8 - icon CSS  Trả lời: 6  Xem: 1197

Tìm thấy 4 mục

Về Đầu Trang