Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P

This is the CSS code:


/* Custom SQUARE CALL TO ACTION Button */

#ctasquare-button-container {
  text-align: center !important;
}

#ctasquare-button {
  text-align: center !important;
  border: solid #000000 2px;
  ...
}
...
/* END overlay text on image properties */

And here is the HTML:

<div>
<div class="sidebyside">

      <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/Surface-Sq-Left-Orange.png" width="480"; height="480" alt="ICT in Education" />

      <textoverlay>
       <h2 class="TitleBlock"><span style="color:white">My Awesome Title</span></h2>
        <h2>
          <font color="white">This is Where The Subtitle Goes. The Quick Brown Fox Jumps Over The Lazy Dog</font>
        </h2>

      <div class="ctasquare-button-container">
      <a href="/xxx" id="ctasquare-button">Learn More
    </a>
  &nbsp;
  <br><br>
</div>
</textoverlay>
</div>
</div>
htmlcssbuttonformatting

Answer №1

If you're looking to enhance your website, consider starting with the following code:

   /* Create a Custom Square Call-to-Action Button */

#ctasquare-button-container {
  text-align: center !important;
}

#ctasquare-button {
  text-align: center !important;
  border: solid #000000 2px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  margin: 0 0 0 -115px; 
    top:30;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  padding: 21px 35px;
  color: #fff;
  border-color: #fff;
  font-family: Futura-Pt;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
}

#ctasquare-button:hover {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 0px 0 0 #b13f21;
  -moz-box-shadow: 0 0px 0 0 #b13f21;
  box-shadow: 0 0px 0 0 #b13f21;
  position: absolute;
  -webkit-transition: .1s background-color linear;
  -moz-transition: .1s background-color linear;
  -o-transition: .1s background-color linear;
  transition: .1s background-color linear;
  color: black;
}
/* End Custom Square Call-to-Action Button */

/* Add overlay text on image properties */
.sidebyside {
  position: relative;
  width:100%;
  text-align:center;
  /* for IE 6 */
}

.sidebyside img{
  width: 100%;
  max-height: 100%;
  height: auto;
}

textoverlay {
  position: absolute;
  text-align: center;
  right: 0;
  left:0;
  bottom:0;
  top:0;
  padding: 0px 0px 0px 0px;
  margin: auto;
}

h2.TitleBlock {
  font-color: #fff;
  font-size: 62px;
  text-align: center;
  position: relative;
  font-weight: normal;
  margin: 30px 40px;

}
/* End overlay text on image properties */
<div>
<div class="sidebyside">

      <img src="http://static1.squarespace.com/static/548c3773e4b0c5db6dc87107/t/559d66a4e4b0f2834cbd26d0/1436378788290/Surface-Sq-Left-Orange.png" width="480"; height="480"alt="ICT in Education" />

      <textoverlay>
       <h2 class="TitleBlock"><span style="color:white">My Awesome Title</span></h2>
        <h2>
          <font color="white">This is Where The Subtitle Goes. The Quick Brown Fox Jumps Over The Lazy Dog</font>
        </h2>



<div class="ctasquare-button-container">
<a href="/xxx" id="ctasquare-button">Learn More
</a>
  &nbsp;
  <br><br>
</div>
</textoverlay>
</div>
</div>

To ensure optimal display on various devices, consider using media queries like the example below:

@media screen and (max-width: 300px) {
  .sidebyside img{
    width: auto;
    height: 100%;
  }
}

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

Enhance your calendar with sleek jQuery styling

Currently, I am utilizing the jQuery-ui.css (smoothness) solely for the calendar CSS. Can anyone provide me with a comprehensive list of all the calendar CSS functions available in it? I'm looking to avoid using any unnecessary CSS that might be causi ...

jqueryhtmlcsscalendar

smoothly hide the dropdown menu when a link is clicked with a transition effect

I am struggling with two bugs in my dropdown menu that I can't seem to fix. The navigation links on my homepage take users to different sections of the page instantly when clicked. However, the issue arises when the dropdown menu does not close after ...

javascripthtmlcss

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...

javascriptjqueryhtmlcss

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

htmlcssangulartypescript

Text that is aligned vertically and centered within a div container

I need help figuring out how to make a single line of text run vertically and stay centered within its container, both from left to right and top to bottom. Any suggestions on how to achieve this using CSS? ...

css

Having trouble getting the sass lighten functions to work properly with a variable

Currently incorporating SASS into my project, Below is the snippet of my variable code :root, [data-theme="default"] { --text-color: #383143; } $text-color: var(--text-color); Utilizing the variable with a lighten function as shown below, body { ...

csssass

Looking for assistance with troubleshooting my isotope.js [code written in jquery and html]?

Explore this JSFiddle link I'm attempting to create sortable fancybox images, similar to the filtering functionality seen on this website. I previously achieved this with v1 of isotope but have been struggling with v2. After countless attempts and ad ...

javascriptjqueryhtmlpluginsjquery-isotope

Having trouble with your HTML iFrame not functioning properly?

My code is not working as expected and I'm puzzled by it. It was working fine yesterday but now it's giving me trouble. <iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.co ...

javascripthtmliframe

Hover Effects on Facebook Tabs

I am currently facing an issue with implementing CSS-sprite for image-based rollovers within a Facebook Tab page. Strangely, the background images are getting removed by Facebook only when inside a Tab page and not in the main application itself. It seems ...

cssfacebookcss-sprites

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

CSS Hover Effect Not Resizing Image

I've been struggling to incorporate a hover effect into my responsive image grid. I want the image to have a dark overlay and fade in some text when hovered over, but I can't seem to make it work. Take a look at my HTML structure: <div class ...

htmlcssimagehoveroverlay

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Experimenting with Angular using a template that includes a mat-toolbar

Currently, I am in the process of writing tests for my Angular application. Here is a snippet of the template used in my AppComponent: <mat-toolbar color="primary"> <span>CRUD Exercise</span> <span class="example-spa ...

htmlnode.jsangulartestingkarma-jasmine

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

htmlcsswordpressforms

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

phpjavascriptjqueryhtmlajax

Customize your popover content with Bootstrap settings

I've been on a quest to dynamically update the content of a Bootstrap popover using JavaScript, but unfortunately, the methods I've tried so far haven't worked out as expected : <!--object with the popover--> <input id="popoverlist ...

javascriptjqueryhtmlcsstwitter-bootstrap

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity