What are the steps to overlay a button onto an image with CSS?

As a CSS newbie, I have a question that may seem silly or straightforward to some. I am struggling with placing a button over an image and need guidance on how to achieve this effect.

Specifically, I want the button to appear like this blue "Kopit" button you see. Currently, I've combined the button and image into one single image for my website using the following code:

CSS:

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;

}

My HTML:

<div id="shop">
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>         
  </div>

Can someone show me how to style the button as a separate element from the image? Any help would be greatly appreciated. Thank you!

htmlcss

Answer №1

After reviewing the information, I propose updating the HTML code as follows:

<div id="store">
    <div class="container">
        <img src="http://placeholder.com/182x121"/>
        <a href="#">Dota 2 Steam</a>
    </div>
</div>

By implementing position:absolute and position:relative, it will help align the blue button correctly.

You can view the development on jsfiddle: http://jsfiddle.net/a8c3j/

Answer №2

Implement this sample into your project

HTML

<div class="picture-container">
    <img src="images/photo-1.jpg" alt="photo description"/>
    <a class="button-link" href="#"></a>
</div>

CSS

.picture-container {position: relative;}
.picture-container .button-link {
    position: absolute;
    bottom: 20px; /*adjust button position*/
    right: 20px; /*adjust button position*/
}

Answer №3

You should apply either relative, absolute, or fixed positioning to your container (#shop) and adjust its zIndex to 100.

Similarly, assign a relative position to elements with the class content and set their zIndex to a lower value like 97.

For images, ensure they also have a zIndex of 91 after applying positioning.

Lastly, elevate the button by giving it an absolute position and setting its zIndex to 95.

Check out the DEMO

HTML

<div id="shop">

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

  </div>

CSS

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
    position:relative;
    z-index:100
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
    z-index:97

}

img{

    position:relative;
    z-index:91

}

.span{

    width:70px;
    height:40px;
    border:1px solid red;
    position:absolute;
    z-index:95;
    right:60px;
    bottom:-20px;

}

Answer №4

I found TryingToImprove's response to be quite helpful. I've taken his advice and condensed it into a sleek CSS design that achieves the same outcome. It's much more straightforward to grasp.

.content {
  display: inline-block;
  position: relative;
}

.content a {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
<div class="content">
  <img src="http://unsplash.it/182/121" />
  <a href="#">Counter-Strike 1.6 Steam</a>
</div>

Answer №5

<div class="content">
  Counter-Strike 1.6 Steam 
     <img src="images/CSsteam.png">
     <a href="#">Buy Now</a>
</div>

/*Apply this css*/
content {
width: 182px; /*328 is 1/3 - 20 margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
content a{
display:inline-block;
padding:10px;
position:absolute;
bottom:10px;
right:10px;
}

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

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Can someone assist me in completing a Vertical Dots Navigation feature that activates on scroll?

I'm struggling to create a vertical dots navigation that dynamically adds the "active" class based on the section currently in view while scrolling. For example, if you are on the first section, the first dot should be white and the rest transparent. ...

jqueryhtmlcss

Place two divs in the middle of another div with equal spacing in between

I am having trouble aligning two divs horizontally within another div while setting a maximum width for each. Additionally, I would like some spacing between the divs to avoid them touching. The following code isn't yielding the desired outcome: HTM ...

htmlcss

What is the best way to notify the user about the input in the textbox?

Imagine you have a button and an input field. How could you notify the user of what is in the input field when the button is pressed? Please provide a simple explanation of your code. ...

javascriptjqueryhtml

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

transferring a PHP object between two PHP files containing HTML code

profiles_information.php I am working with a PHP document that receives information from Ajax and sets it as attributes to an object of the Profile class. I have created HTML to display a table, where users can click on "Add" to send the object to add_to_ ...

phphtmlajax

What is the process for arranging multiple text boxes beside a radio button upon selection?

Displayed below is the HTML code for a page featuring three radio buttons- <html> <body> <form> <input type="radio" name="tt1" value="Insert" /> Insert<br /> <input type="radio" name="tt2" value="Update" /> Update<b ...

javascripthtmlformstextbox

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

scrape particular data from a table using scrapy

Currently, I am utilizing scrapy to extract content from a website specifically located within a particular <td> tag. The guide provided demonstrates downloading all the information, however, I only require the data from one individual <td>. As ...

pythonhtmlweb-scrapingscrapy

The slider spills over the edges of the page

Seeking assistance – I managed to insert this logo slider onto my page. It seems to be functioning properly, but due to the width settings of the website engine, the modules are not fully stretching across the page. In an attempt to make the slider cove ...

jqueryhtmlcssslider

Generate dynamic DIV elements and populate them with content

Can you assist me in getting this code to function properly? My goal is to dynamically create elements inside a div and fill each element with a value fetched from the database through a server-side function. I'm unsure if there's a better approa ...

javascripthtmlgoogle-apps-scriptdynamic-content

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

htmlcssionic-framework

The MySQL Query Maker

To fetch data from a database for only one row and then generate separate pieces of information, use the following code: <?php session_start(); ob_start(); error_reporting(E_ERROR | E_WARNING | E_PARSE); ini_set("display_errors", 1); set_time_limit(1 ...

phphtmlmysqlcss

Tips for locating and clicking the 'Start' button in HTML using either find_element_by_xpath or the Selenium-Python API

Need help selecting the 'Start' button and clicking it in the HTML code below. I want to do this using the python-selenium library like so: driver.find_element_by_xpath('//div[contains(@class,"box enter")' ...

pythonhtmlselenium

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

Problems with Displaying Facebook Ads on Mobile Web

Currently, I am incorporating Facebook Audience Network (MobileWeb-beta) for advertisements on my mobile website. However, the 320x50 HTML source code is not displaying the ad across the width of the mobile screen as intended; instead, it appears smaller ( ...

htmlfacebookfacebook-ads-apiiphone-web-appfacebook-audience-network

Modify an HTML table and record any modifications as POST requests using Javascript

As a beginner in JavaScript and HTML, I am open to corrections if I am not following the correct practices. Recently, I delved into editing an HTML form table. {%extends 'base.html'%} {%block content%} <html> <body> <h4> Search ...

javascripthtmldjango

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access

My website is currently in development and can be accessed at: The top navigation bar on the homepage functions properly across all browsers. However, there are three sections with dropdown submenus - About Us, Training, and Careers. These dropdown submen ...

javascriptphphtmlcss

Converting JSON data into an HTML table

I'm struggling to convert a JSON object into an HTML table, but I can't seem to nail the format. DESIRED TABLE FORMAT: Last Year This Year Future Years 45423 36721 873409 CURRENT TABLE FORMAT: Last Year 45423 This ...

javascriptjqueryhtmljsontwitter-bootstrap-3