Corner label with an icon on a img

coffeeeee

I have an image in the HTML that I want to slap a corner label with icon on when the user clicks on the image.

Could someone help me creating a css class that I can slap on to an to give it a corner label with an icon like shown in the attachment.

so my code would look as follows

<div> 
  <img src="blahblah.jpg">
  <img src="another.jpg" class="image-label">
  <i class="fa fa-heart"></i>
</div>

In this case the first image would appear as normal. The second one would have the corner label/icon combo as shown in the attached image.

Can someone tell me what image-label css class would put a corner with a background color (e.g. blue) and then put the font awesome 'heart' icon centered in that corner label/icon as shown in the image.

Thank you!

Hemant Parashar

You're clearly using font awesome for the heart, so no need for another image. Use a div to hold the icon and position it with border-radius like this

.image-container{
  width:200px;
  height:200px;
  position:relative;
  margin:100px;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-label{
  width:60px;
  height: 60px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  background:skyblue;
  font-size:30px;
  position:absolute;
  top:0;
  right:0;
  transform:translate(50%,-50%);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
  <img src="https://www.gqmiddleeast.com/sites/default/files/gqme/styles/766_431_landscape/public/images/2019/06/12/Tony-Stark.jpg?itok=7-QNeRCi">
  <div class="image-label">
    <i class="fa fa-heart"></i>
  </div>
</div>

Hope this helps !

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-9

Comments

0 comments

TOP Ranking

Article

Corner label with an icon on a img

Corner label with an icon on a img

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?