Use CSS to place a checked icon within a div containing an image

I have a set of images where clicking on them reveals a green checkmark icon. However, I am struggling to position it correctly.

.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="selected_div">
            <i class="fa fa-check text-white"></i>
        </div>
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 1 </span>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
</div>

I need the green div to be at the top right, with the check mark centered within it and responsive as well.

https://i.sstatic.net/ZiX50.png

Any assistance would be appreciated.

Thank You.

htmlcss

Answer №1

Here is a code snippet for you to review:

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}

.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
    position: relative;
}

.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}

.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}

.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
    border-radius: 50%;
    right: 0px;
    padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                             <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>

Answer №2

Here is the updated code snippet:

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}

.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}

.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}

.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}

.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
  right: 5px;
    top: 5px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>

Answer №3

Add right: 0; to .speakers_list .selected_div

.p-t-md{
padding-top:20px;
}

.p-l-md{
padding-left:20px;
}


.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}

.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}

.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}

.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}

.speakers_list .selected_div {
position: absolute;
  right: 0;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                         
                         
                        </div>

Answer №4

.p-t-md {
    padding-top: 20px;
}
.p-l-md {
    padding-left: 20px;
}
.speakers_list {
    width: 605px;
    margin: 0 auto;
    height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    text-align: center;
}
.speakers_list .speaker_div {
    width: 75px;
    height: 75px;
    margin: 0 auto;
}
.speakers_list .speaker_div img {
    height: 100%;
    width: 100%;
}
.speakers_list .speaker_div .speaker_name {
    color: #999999;
    font-size: 10.61px;
}
.speakers_list .selected_div {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: #27c24c;
    border: thin white solid;
    color: #ffffff;
    border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div class="row speakers_list p-t-md p-l-md" >
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                            <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 1 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 2 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 3 </span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
                          <div class="selected_div">
                              <i class="fa fa-check text-white"></i>
                            </div>
                            <div class="speaker_div">
                                <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
                            </div>
                            <div class="speaker_name text-center m-t-xs">
                              <span> 4 </span>
                            </div>
                          </div>
                         
                         
                        </div>

I trust this information will be useful.

Answer №5

Check this out

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet>
<div class="row speakers_list p-t-md p-l-md" >
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 1 </span>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
        <div class="speaker_div">
            <div class="selected_div">
                <i class="fa fa-check text-white"></i>
            </div>
            <img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
        </div>
        <div class="speaker_name text-center m-t-xs">
            <span> 2 </span>
        </div>
    </div>
    </div>


</div>

.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
    margin: 0 auto;
    height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
}
.speakers_list .speaker_div {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    position: relative;
}
.speakers_list .speaker_div img {
    height: 100%;
    width: 100%;
}
.speakers_list .speaker_div .speaker_name {
    color: #999999;
    font-size: 10.61px;
}
.speakers_list .selected_div {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    background: #27c24c;
    border-radius: 50%;
    border: thin white solid;
    text-align: center;
}

Live Demo - https://jsfiddle.net/grinmax_/qn3jyhbb/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss

Should the .js file type be omitted in the <script> tag for semantic accuracy?

Upon reviewing some inherited code, I noticed that JavaScript files are being linked in the following format: <script src="/js/scriptfile" type="text/javascript"></script> However, I was expecting to see: <script src="/js/scriptfile.js" ...

javascripthtml

Is there a way to create a two-toned horizontal rule tag?

Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...

htmllinear-gradientscss

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

javascriptcssreactjshtml-table

transferring data from an HTML form on the View page to the controller

I am currently working with the MVC framework. Within my project, I have a View named view1 which contains an HTML Form outlined below: <form action='/Exercise/Exercise4_SubmitForm' method="post"> Name: <input type="text" name=" ...

c#htmlasp.net-mvc

What is the best method for retrieving values from selected radio buttons?

I am trying to retrieve the values of the selected radio buttons with the name is_external example.html <div class="exter_inter"> External <input type="radio" name="is_external" value="1" <?php if(isset($_GET['status']) &&am ...

jqueryhtmlradio-button

Issue with the positioning of the datepicker is not functioning properly

I'm currently facing an issue with the position of a date picker plugin from jquery. The search box on my website allows users to select a range of dates using the date picker, but when enabled, the date picker appears at the bottom left corner of the ...

javascriptphpjqueryhtmldatepicker

IE does not support hover effects

Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE. normalize.css demo.css set2.css font- ...

javascripthtmlcss

Is there a function called 'onViewportChange' in media queries that triggers a search in the .css file for applicable styling?

So I'm not entirely sure about all the specifics, but my understanding is that each time a new HTML element is created, it checks through all linked CSS files and inline styles to see if those styles should be applied to that element. This suggests t ...

htmlcssbrowser

Unable to use jQuery to choose an item from a dropdown menu and reveal a hidden text box

Seeking assistance in displaying a paragraph with text and a textbox when a specific option is selected from the dropdown menu on my form. Previously used code for radio buttons, but encountering issues with this scenario. Any guidance would be greatly app ...

javascriptjqueryhtmldrop-down-menuforms

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

Reduce the value in the database when a button is clicked using PHP

I am currently working on a carpooling website and I could really use some assistance. I have implemented a button that, once clicked, should decrease the number of available free spaces in the car by one (meaning the person who clicks it will reserve a ...

phphtmlmysqlsqlmysqli

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

What are the steps to assign a personalized title to the PDF file being saved with the FPDF toolkit?

If you're familiar with the solution, just refer to the end where it says Question, so you can skip the explanation and save time. Currently, I am utilizing the FPDF library which typically opens PDFs directly in the browser by default. To change th ...

phphtmlpdffpdf

Using jQuery to smoothly transition the page: first fade out the current content, then switch the background

I'm currently facing an issue with trying to create a step-by-step operation that involves fading the container div around a target div, changing the background, and then fading it back in. The problem is that all the functions in this block are being ...

javascriptjqueryhtmlcss

Achieving full-screen fill with inline SVG

I recently purchased an svg graphic and exported it to a .svg file with the intention of using it in inline HTML. I placed it within the <body> tag of my document, but now I'm trying to make it fill the entire width and height of the screen. I&a ...

htmlcsssvg

Designing php/mysql data in a container

After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...

phphtmlcssarrays

What is the best way to collapse additional submenus and perform a search within a menu?

Whenever a sub-menu is activated, only the current sub-menu should be open while the others remain closed. I need the search function to be enabled on the text box and display all items containing the specified value while also changing the color of <a ...

javascriptjqueryhtmlcssresponsive-design

Ways to retrieve the value of a table cell without a specific class using Jquery

I'm currently tackling the following code: <table> <tr> <td>floor area</td> <td>60 m²</td> </tr> <tr> <td>floor area unit</td> <td>30 m²</td> </tr> <tr ...

jqueryhtml