Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Overlay buttons on an image with CSS
Roland Taylor
Roland Taylor

Posted on • Edited on

     

Overlay buttons on an image with CSS

Hi! In today's tutorial, I'm going to show you how you can add buttons above an image using some simple CSS.

If you've followed any of my tutorials before, you know that I'm big on presentation. To that end, I've included some cosmetic details along with the essential code needed to achieve our goal.

Where necessary, I've added comments to differentiate is optional, and what is absolutely required.

Our HTML:

For the html code, all we need is a(recommended)*figure element, an image, adiv to wrap our(optional)figcaption and(required)p elements, and a few buttons.

<figure><imgsrc="img/example.png"alt=""><!--Optional, if you're only adding a single button--><div><!--Optional--><figcaption>           example:</figcaption><!--Required for grouping buttons--><p><button>1</button><button>2</button><button>3</button></p></div></figure>
Enter fullscreen modeExit fullscreen mode

You'll note that I chose semantically significant elements for everything, except the div, which we don't really want to be accounted for semantically.


NOTE:

The<figure> element is recommended for its semantic value, but you can technically use any container element you like. Examples includesection,p,article, anddiv. However, I highly recommend sticking with elements that carry semantic value, for SEO and accessibility benefits.

ALSO NOTE:

You could opt to use a single button, and in such a case, you could drop thep element, but you will still need to position the button, as shown with thediv andp elements in the CSS code below.


Our CSS:

Now comes the fun part. Here's where you'll really have to pay some attention, because there's a lot to cover. Don't worry though, I'll break it down for you. I've included the explanations directly in the code as comments.

/*OPTIONAL, but recommended:

  • Prevents borders and padding from messing withexplicitly declared height or width.
  • Resets margin and padding on everything in thebrowser.*/

*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* OPTIONAL: A matter of style and taste./
/ NOTE: I've grouped selectors together, wherever
properties are sharing values.

  • This reduces code duplication.
  • It makes it easier to adjust multiple styles at once.
  • Makes your code easier to maintain.*/

body,p,div,figure,figcaption,button{
display:flex;
font-family:sans-serif;
font-size:10px;
}

body,figcaption,div,p,button{
align-items:center;
}

body,button{
justify-content:center;
}

/* OPTIONAL: This allows us to place the <figure>
element in the center of the page */

body{
height:100vh;
}

figure{
/* Required:/
position:relative;
/ Optional: */
width:50%;
}

img{
/aspect-ratio: is not supported in older browsers/
aspect-ratio:1/.5;
width:100%;
}

/*The div is optional, and only included to help with
placement.
*NOTE HOWEVER: theposition: absolute; property +
value paair are required, along with at least one
of:bottom,left:,right:, andtop:.
*/

div{
justify-content:flex-start;
flex-flow:rownowrap;
height:30px;
position:absolute;
bottom:10px;
left:15px;
right:15px;
width:auto;
}

/The figcaption is totally optional, but recommended./
figcaption{
background-color:rgb(245,245,245);
box-shadow:008pxrgba(0,0,0,.2);
height:25px;
letter-spacing:2px;
padding:015px;
text-transform:uppercase;
width:50%;
}

/Required to group and distribute the buttons/
p{
/Tells the element to take up all available space:/
flex-grow:1;
/Tells the flexbox layout system to place items
toward the right of the container.
/

justify-content:flex-end;
/Not supported on older browsers; use margins on
the child elements if such support is needed.
/

gap:15px;
}

/You can style your buttons however you like/
button{
aspect-ratio:1/1;
border:1pxsolidrgb(195,195,195);
border-radius:50%;
background-color:white;
font-weight:bold;
height:25px;
}

Enter fullscreen modeExit fullscreen mode




Our result will look something like this:

Screenshot of the results

Please note that if you've chosen to style the buttons exactly as I have, you won't have hover or click states, because the default button style provided by the browser is disabled by our own. You can add these states by using the:hover,:active, and:focus pseudo classes.

As an exercise, you can probably try playing around with these yourself and see what you come up with. I'd be curious to see your results, so don't hesitate to share them with me in the comments!


Looking for more?

If you're interested in learning more about CSS, you can followme right here on DEV or check out myfree content onTwitter,YouTube andTwitch! I'll be dropping more exciting CSS content soon, and I always love hearing from you with your own experiments and projects, so feel free to share them with me!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

That ­CSS Funstuff guy.
  • Location
    Barbados
  • Work
    Founder, Director @ RolandiXor Media Inc.
  • Joined

More fromRoland Taylor

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp