Эффект для картинок html

Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

Красивое вращение картинки при наведении CSS

С помощью этого эффекта можно добиться красивого вращения картинки при наведении, для этого используем свойство transform. Такой эффект можно использовать для галереи, или для того, чтобы привлечь внимание к определенному элементу на сайте.

Пример

HTML

CSS

 .beauty-rotate < width: 300px; height: 300px; border: 4px double #bd6c46; /* Рамка */ overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.beauty-rotate:hover

Разворот картинки при наведении CSS

Этот эффект можно использовать не только для того чтобы повернуть изображение, при повороте можно вставить на обратную сторону текст или другую картинку, либо отразить по горизонтали исходное изображение, как на примере, что бы картинка разворачивалась.

Пример

HTML

CSS

 /* Блок картинки */ .rotate-block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; >/* Изображение */ .change-img < width: 300px; height: 300px; position: relative; perspective: 1000px; border: 1px solid #d68360; /* Рамка */ >.change-img:hover .front-side-img < transform: rotateY(180deg); >.change-img:hover .back-side-img < transform: rotateY(360deg); >/* Стороны изображения */ .front-side-img, .back-side-img < position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 1s; back-side-imgface-visibility: hidden; >.front-side-img img < max-width: 100%; min-width: 100%; height: auto; >.back-side-img img < max-width: 100%; min-width: 100%; height: auto; transform: scaleX(-1);/* Отражаем изображение по горизонтали */ >.back-side-img

Поворот картинки при наведении CSS

С помощью этого эффекта можно поворачивать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.

Пример

HTML

CSS

 img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >

Вращение картинки при наведении CSS

С помощью этого эффекта можно вращать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.

Пример

HTML

CSS

 img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

CSS

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

CSS

Эффект при наведении на картинку с текстом CSS

Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-three < background: #527c82; >figure.effect-text-three img < width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; >figure.effect-text-three:hover img < opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three figcaption < text-align: left; >figure.effect-text-three h3 < position: relative; overflow: hidden; padding: 0.5em 0; >figure.effect-text-three h3::after < position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); >figure.effect-text-three:hover h3::after < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three p < padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); >figure.effect-text-three:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-four figcaption < text-align: right; >figure.effect-text-four h3, figure.effect-text-four p < position: absolute; right: 30px; left: 30px; padding: 10px 0; >figure.effect-text-four p < bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); >figure.effect-text-four h3 < top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); >figure.effect-text-four:hover h3 < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-four h3::after < position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-four h3::after, figure.effect-text-four p < opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-four:hover h3::after, figure.effect-text-four:hover p

Эффекты при наведении на картинку с текстом CSS

Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-two figcaption::before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); >figure.effect-text-two h3 < position: absolute; top: 50%; left: 0; width: 100%; color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); >figure.effect-text-two figcaption::before, figure.effect-text-two p < -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-two p < position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); >figure.effect-text-two:hover h3 < color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); >figure.effect-text-two:hover figcaption::before , figure.effect-text-two:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-one img < width: -webkit-calc(100% + 50px); width: calc(100% + 100px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.2); >figure.effect-text-one figcaption < top: auto; bottom: 0; height: 50%; text-align: left; >figure.effect-text-one h3, figure.effect-text-one p < -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-one h3 < color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; >figure.effect-text-one p < background: rgba(0,0,0,0.6); color: #fff; padding: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; >figure.effect-text-one:hover img, figure.effect-text-one:hover p < opacity: 1; >figure.effect-text-one:hover img, figure.effect-text-one:hover h3, figure.effect-text-one:hover p < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-one:hover p

Источник