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

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

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

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

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

Пример

HTML


<div class="beauty-rotate">
  <img src="image.jpg" alt="" />
</div>

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 {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

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

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

Пример

HTML


<div class="rotate-block">
  <div class="change-img">
    <div class="front-side-img"><img src="image.jpg" alt=""/></div>
    <div class="back-side-img"><img src="image.jpg" alt=""/></div>
  </div>
</div>

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 {
  transform: rotateY(180deg);
}

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

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

Пример

HTML


<img class="small-rotate" src="image.jpg" alt="" />

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


<img class="rotate-img" src="image.jpg" alt="" />

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


<img src="image.jpg" alt="" title=""/>

CSS


img:hover {
    outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */
    outline-offset: -10px; /* Выводим рамку внутри элемента */
}

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

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

Пример

HTML


<img src="image.jpg" alt="" title=""/>

CSS


img:hover {
    border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */
}

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

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

Пример

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML


<!-- Первая картинка -->
<div class="hover-text-one">
  <figure class="effect-text-three">
    <img src="image.jpg" alt=""/>
      <figcaption>
	<h3>Lorem ipsum</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </figcaption>			
  </figure>
</div>
<!-- Вторая картинка -->
<div class="hover-text-one">
  <figure class="effect-text-four">
    <img src="image.jpg" alt=""/>
      <figcaption>
	<h3>Lorem ipsum</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </figcaption>			
   </figure>
</div>

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 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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

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

Пример

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML


<!-- Первая картинка -->
<div class="hover-text-one">
  <figure class="effect-text-two">
    <img src="image.jpg" alt=""/>
      <figcaption>
	<h3>Lorem <span>ipsum</span></h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </figcaption>			
  </figure>
</div>
<!-- Вторая картинка -->
<div class="hover-text-one">
  <figure class="effect-text-one">
    <img src="image.jpg" alt=""/>
      <figcaption>
	<h3>Lorem <span>ipsum</span></h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </figcaption>			
   </figure>
</div>

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 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}

Эффект появление кнопки при наведении CSS

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

Пример

Lorem ipsum

LINK

Lorem ipsum

LINK

HTML


<div class="hover-effect-btn">
  <img src="image.jpg" alt="" />
  <h3 class="title">Lorem ipsum</h3>
  <div class="overlay"></div>
  <div class="button"><a href="#">LINK</a></div>
</div>

CSS


.hover-effect-btn {
  position: relative;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком */
  transition: background 0.5s ease;
}
.hover-effect-btn:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, 0.9); /* Настройка цвета и прозрачности для блока с заголовком при наведении */
}
.title {
  position: absolute;
  width: 100%;
  left: 0;
  top: 25%; /* Отступ сверху */
  font-size: 1.900em; /* Размер текста заголовка */
  text-align: center;
  text-transform: uppercase; /* Заглавные буквы */
  color: white; /* Цвет заголовка */
  z-index: 1;
  transition: top .5s ease;
}
.hover-effect-btn:hover .title {
  top: 10%; /* Отступ сверху при наведении */
}
.button {
  position: absolute;
  width: 100%;
  left:0;
  top: 65%; /* Отступ сверху */
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.button a {
  padding: 15px 40px; /* Отступ */
  text-align: center;
  background: #ff921e; /* Цвет кнопки */
  color: white; /* Цвет текста */
  border: 1px solid white; /* Ширина, стиль и цвет границы */
  z-index: 1; 
}
.hover-effect-btn:hover .button {
  opacity: 1;
}
By julia