Css иконка поверх изображения

How to Overlay Icons on Top of Images with CSS

Recently I worked on a project where we had to make a custom image gallery. The requirement needed me to place many components like icons, texts, another image, and many other things on the image. While doing that, I learned about the steps to overlay the components on the image which I would like to share. Let’s build a video player page to understand how the overlaying of icons works in CSS. Let’s consider the below template. We have an image on which we need to place the play button in the center and like button at the top-right corner of the image.

 Video Player Hover over to play the video  class="container">  href="#" class="like-button" title="Like Button">  class="fa fa-heart fa-1x">   src="https://staticvideos.pexels.com/videos/1448735/pictures/preview-0.jpg" alt="Beautiful Image" class="image">  class="overlay">  href="#" class="play-icon" title="Video Play">  class="fa fa-play">    

body  display: flex; flex-direction: column; justify-content: center; align-items: center; > .image  width: 100%; height: auto; > .overlay  height: 100%; width: 100%; opacity: 0.3; transition: .3s ease; background-color: transparent; > .container:hover .overlay  opacity: 0.7; > .play-icon  color: black; font-size: 2rem; cursor: pointer; > .like-button  color: red; font-size: 20px; cursor: pointer; border-radius: 10rem; background-color: transparent; border: transparent; > .like-button :hover  color: red; > 

We have styled the components and now they are ready to be placed on the image. Normally when we write the elements, the components are stacked vertically like below.
But we need to overlay the two icons on the image in the position we want. We can achieve it by using the following steps.

Step 1. Assign the Positions

This is the most important step. The first step to enclose the components along with the image as one element and assign the CSS property position: relative . And the icons we need to place on the image are assigned the property position: absolute .
In this case, we are adding the class .container( which encloses the image and the icons) position: relative , and the icons we overlay are assigned the property position: absolute .
You can know more about the position property in CSS below. CSS Property: Position

Step 2. Assign z-index higher than the image to the icons if necessary

In this case, I am assigning z-index to the div of icons ( .overlay and .like-button ) which is higher than that of the image so that they are overlayed on the image. In some cases, it is not required to add if the default indices of the components are favorable to our requirement. But make sure to check and add.
We have added the positions and z-index in the below code.

 body  display: flex; flex-direction: column; justify-content: center; align-items: center; > .image  width: 100%; height: auto; > .overlay  position: absolute; height: 100%; width: 100%; opacity: 0.3; transition: .3s ease; background-color: transparent; top: 0; bottom: 0; left: 0; right: 0; > .container  position: relative; width: 100%; max-width: 400px; > .overlay:hover  opacity: 0.7; > .play-icon  position: absolute; color: black; font-size: 2rem; cursor: pointer; left: 50%; bottom: 50%; > .fa-heart  position: absolute; z-index: 2; color: red; position: absolute; > 

You can know more about the z-index here.

Step 3. Position the icons accordingly using the other CSS properties

Since we have our icons placed on the image, let’s move the play button to the center and the like button to the top-right end of the image using few properties.

 body  display: flex; flex-direction: column; justify-content: center; align-items: center; > .image  width: 100%; height: auto; > .overlay  position: absolute; height: 100%; width: 100%; opacity: 0.3; transition: .3s ease; background-color: transparent; top: 0; bottom: 0; left: 0; right: 0; > .container  position: relative; width: 100%; max-width: 400px; > .overlay:hover  opacity: 0.7; > .play-icon  position: absolute; color: black; font-size: 2rem; cursor: pointer; left: 50%; bottom: 50%; > .fa-heart  position: absolute; z-index: 2; color: red; position: absolute; > 

We have added some transitions when the user hovers over the icons to make the page look more beautiful.

Conclusion

And that sums it up! Comment below if you have any feedback. Please find the example of the project here. Thank you for reading.

Источник

Как сделать — Наложение иконки на изображение

Узнать, как создать эффект значка наложения на изображение при наведении курсора.

Наложение иконки на изображение

Наведите указатель мыши на изображение, чтобы увидеть эффект наложения.

Создать наложение иконки на изображение

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */
.container position: relative;
width: 100%;
max-width: 400px;
>

/* Сделайте изображение отзывчивым */
.image width: 100%;
height: auto;
>

/* Эффект наложения (полная высота и ширина) — накладывается поверх контейнера и поверх изображения */
.overlay position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
>

/* Когда вы наводите курсор мыши на контейнер, исчезает значок наложения */
.container:hover .overlay opacity: 1;
>

/* Значок внутри наложения расположен посередине вертикально и горизонтально */
.icon color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
>

/* При наведении курсора мыши на значок, измените цвет */
.fa-user:hover color: #eee;
>

Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т. д.) в нашем учебнике Как сделать — Эффект наведения на изображение.

Зайдите на наш учебник CSS Изображения чтобы узнать больше о том, как стилизовать изображения.

Источник

Как сделать hover effect с иконкой поверх картинки?

Мне необходимо с помощью css и его :hover наложить градиент и icon поверх картинки. Выглядеть это должно примерно вот так, у меня же получается это только вот так:

Подскажите как сделать пожалуйста. И еще возможно есть картинки вставлять через html, а не через css?

Такой вариант пробовали

Да, конечно. Этот вопрос актуален, только если найдется ответ на вопрос выше. Как вставить картинки в html я знаю:)

2 ответа 2

.test < display: block; height: 200px; background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; width: 400px; position: relative; >.testHover < opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; transition: opacity 1s ease-in-out; background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%), url(http://krolik74.kpeatop.com/hosting.png) no-repeat; >.test:hover .testHover

P.S для иконки я использовал font-awesome вот линк на него:

Благодаря Zicrael (спасибо тебе) доработал так, как хотел. Чтобы картинки находились в html, а не css.

  
 
 .container < position: relative; width: 600px; >.image < opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; >.middle < transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; >.container:hover .image < /*opacity: 0.5; */ >.container:hover .middle < opacity: 1; >.text < font-size: 16px; width: 600px; height: 208px; background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%) no-repeat; >.union < background: url(http://ipic.su/img/img7/fs/Union.1526023689.png) center no-repeat; width: 100%; height: 100%; >

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Как спозиционировать иконки соц. сетей поверх изображения?

Как сделать так, чтобы эти иконки были поверх картинки? вот так: Вот код:

2 ответа 2

Используя эти CSS-переменные можно управлять позицией .team__social

figure < position: relative; border: 1px solid red; >.flex-container < display: flex; >img < display: block; max-width: 100%; >.team__social < display: flex; position: absolute; --left: 50%; --top: 60%; left: var(--left); top: var(--top); transform: translate(calc( -1 * var(--left)), calc( -1 * var(--top))); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; >.team__social > *:not(:last-child)

*, *::before, *::after < box-sizing: border-box; margin: 0; padding: 0; >:root < --timing: 0.3s ease-in-out; >img < display: block; max-width: 100%; >figure < position: relative; border: 2px solid black; padding: 10px; cursor: pointer; >figure > img < margin: 0 auto; >figure::before < position: absolute; display: block; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0; transition: opacity var(--timing); >figure:hover::before < opacity: 0.5; >.flex-container < display: flex; >.team__social < display: flex; position: absolute; --left: 50%; --top: 45%; left: var(--left); top: var(--top); transform: translate(calc( -1 * var(--left)), calc( -1 * var(--top))); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; opacity: 0; transition: opacity var(--timing); >figure:hover .team__social < opacity: 1; >.team__social>* < min-width: 20px; >.team__social>*:not(:last-child) < margin-right: 10px; >.figcaption-container

Спасибо! Хотел ещё спросить, как сделать так, чтобы это появлялось при :hover, при этом не сдвигая figcaption-ы и чтобы «background-color: rgba(45, 45, 45, 0.5);» (поверх) картинки при ховере появлялся тоже? Заранее, спасибо 😉

Реализация с появлением при :hover , а позиционирование выполнено на Flexbox .

figure .wrap < display: inline-flex; position: relative; >figure .wrap .team__social < display: flex; flex-direction: row; justify-content: center; align-items: flex-end; background: rgba(0,0,0,.5); padding-bottom: 10%; box-sizing: border-box; opacity: 0; transition: all .3s linear; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; >figure:hover .team__social < opacity: 1; >figure .wrap .team__social > img < display: block; width: 20px; height: 20px; background: #fff; >figure .wrap .team__social > img:not(:last-child)

Источник

Overlay a play icon on top of thumbnail with css

Use a pseudo element and change the position style.

To preserve your hovering effect you can attach the :hover selector to the list item and target the img inside:

html, body < margin: 0; padding: 0; >.content < font-size: 10px; margin: 0 auto 0; width: 75%; max-width: 750px; text-align: left; padding-bottom: 3em; background-color: #eee; >p < font-size: 2em; line-height: 1.4em; letter-spacing: normal; font-style: normal; font-weight: normal; margin: 0 0 1em 0; >.play-icon:after < position:absolute; top:0; left:0; content:''; width: 100%; height: 100%; background: url("https://cdn1.iconfinder.com/data/icons/video-controls/32/play-20.png"); background-repeat: no-repeat; background-position: center center; background-color: transparent; z-index: 9999; >.thumb-grid < display: block; width: 100%; padding: 0; margin: 3em 0 3em 0; background-color:; list-style-type: none; >.thumb-grid:after < content:''; width: 0; display: block; clear: both; >.thumb-grid li < position: relative; overflow: hidden; width: 16%; margin: 0 5% 5% 0; display: block; float: left; padding-bottom: 16%; >.thumb-grid li:nth-child(5n) < margin-right: 0; >.thumb-grid img < position: absolute; left: 0; top: 0; cursor: pointer; width: 100%; background-color: #ccc; >.thumb-grid li:hover img

Een dynamische quiz in teams, die wordt geleid door een enthousiaste en bekwame quizmaster. Doormiddel van beeld en geluid wordt een breed scala aan vragen voorgelegd. Het raden van tunes, videofragmenten, teksten, foto’s met de hand op de quiz-knop of na teamberaad.

  

  

  

  

Источник