Styling text over an image using CSS with an eye-catching overlay effect

I have been attempting to add content over an image with some overlay effects, but unfortunately, the output is not meeting my requirements. I am also unsure of how to implement overlay effects. Can anyone provide assistance, please?

.destination {
  padding: 20px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.destination h3 {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.destination span {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 16px;
}
.overlay-leftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
}
.destinationmask {
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0.4;
  filter: alpha(opacity=50);
  background: #000;
}
<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
    <div class="table-display">
        <div class="table-cell table-cell-bottom">
            <div class="destination">
                <h3>TEST</h3>
                <span>Check,check1,check2</span>
            </div>
        </div>
    </div>

Essentially, I am aiming for something similar to this.

htmlcss

Answer №1

Instead of using the <img> tag, it is recommended to utilize the CSS property background-image. For adding effects, consider using pseudo elements like :before.

Take a look at the example snippet provided below:

.destination {
    padding: 20px;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all .5s ease;
    -ms-transition: all .5s ease;
    -webkit-transition: all .5s ease;
}
.destination h3 {
    font-size: 25px;
    color: #fff;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.destination span {
    display: block;
    font-size: 15px;
    color: #fff;
    line-height: 16px;
}
.overlay-leftTop {
    display: block;
    position: relative;
    text-decoration: none;
    width: 300px;
    height: 300px;
    z-index: 9;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.overlay-leftTop:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0,0,0,0.3);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    
}
.overlay-leftTop:hover {
   text-decoration: none;
}
.overlay-leftTop:hover:before {
   background: rgba(0,0,0,0.5);
}
.destinationmask {
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.4;
    filter: alpha(opacity=50);
    background: #000;
}
<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
  <div class="table-display">
    <div class="table-cell table-cell-bottom">
      <div class="destination">
        <h3>TEST</h3>
        <span>Check,check1,check2</span>
      </div>
    </div>
  </div>
</a>

I hope you find this information helpful!

Answer №2

I believe this is the solution you are looking for.

    .destination {
        padding: 20px;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: all .5s ease;
        -ms-transition: all .5s ease;
        -webkit-transition: all .5s ease;
    }
    .destination h3 {
        font-size: 25px;
        color: #fff;
        line-height: 20px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .destination span {
        display: block;
        font-size: 15px;
        color: #fff;
        line-height: 16px;
    }
    .overlay-leftTop {
        display: block;
        position: relative;
        text-decoration: none;
        width: 300px;
        height: 300px;
        z-index: 9;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
    }
    .overlay-leftTop:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        background: rgba(0,0,0,0.3);
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        
    }
    .overlay-leftTop:hover {
       text-decoration: none;
    }
    .overlay-leftTop:hover:before {
       background: rgba(0,0,0,0.5);
    }
    .destinationmask {
        width: 100%;
        height: 100%;
        z-index: 5;
        opacity: 0.4;
        filter: alpha(opacity=50);
        background: #000;
    }
    .view-btn{
          position: absolute;
        top: 180px;
        font-size: 16px !important;
        border: 2px solid #fff;
        display: inline-block !important;
        text-align: center;
        padding: 10px 15px;
        opacity: 0;
      transition:all 350ms ease 0s;
    }
    .overlay-leftTop:hover .view-btn{
      opacity:1;
    }
    <a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
      <div class="table-display">
        <div class="table-cell table-cell-bottom">
          <div class="destination">
            <h3>TEST</h3>
            <span>Check,check1,check2</span>
  <span class="view-btn">View More</Span>
          </div>
        </div>
      </div>
    </a>

Answer №3

Kindly give this a shot. I have incorporated some CSS styling:

.img-wrap {
  display: inline-block;
  position: relative;
  width: 386px;
}
.img-box:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  transform:scale(0); 
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
  transform:scale(1); 
}
.img-wrap:hover .overlay-leftTop{
  opacity:1;  
}
img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}


.destination {
  padding: 20px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.destination h3 {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.destination span {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 16px;
}
.overlay-leftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;  
  opacity:0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap {
  display: inline-block;
  position: relative;
  width: 386px;       
}
.img-box:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  transform:scale(0); 
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
  transform:scale(1); 
}
.img-wrap:hover .overlay-leftTop{
  opacity:1;  
}
img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}
<div class="img-wrap">
  <div class="img-box">
    <img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
  </div>
  <a href="" class="overlay-leftTop">
    <div class="table-display">
        <div class="table-cell table-cell-bottom">
            <div class="destination">
                <h3>TEST</h3>
                <span>Check,check1,check2</span>
            </div>
        </div>
    </div>
  </a>
</div>

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 relative pathway is functional for displaying images in the CSS file, however, it does not work in the

Okay, I am going to rewrite this... I am currently working on a project that consists of two layers. The top layer involves HTML5 animations such as rollovers and slides, while the bottom layer features kaleidoscope animation using images and CSS. The is ...

javascriptcsshtmlrelative-path

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

javascriptjqueryhtmltwitter-bootstrap

Show a portion of decimal numbers without altering their true numerical values

Currently, I am immersed in a web project that involves incrementation animations. To achieve this, I have devised a counter function similar to the one shown below: const counters = document.querySelectorAll('.counter'); counters.forEach ...

javascripthtmlcss

What is the expected output format for htmlspecialchars?

When I try the following: echo (htmlspecialchars("andreá")); I expect to see So, assuming that if I do echo (htmlspecialchars_decode("andreá")); I would get andreá. However, instead of the expected result, I see Additionally, when I run echo ...

phphtmlutf-8

Tips for incorporating a JSON data frame into an HTML document

Exploring d3js on my own, I stumbled upon an extensive collection of examples here. It appears that for every visualization, we require two distinct files. One being a script (an html file) and the other a json file containing the dataset. I wonder if the ...

htmljsond3.jsvisualization

Ways to solve the issue of closing autocomplete dropdown when clicking away from it?

Is there a way to automatically close an autocomplete dropdown when clicking outside of it? I currently have a custom autocomplete component that is being called three times with different labels from another Vue page called departmentDetail.vue. For exam ...

htmlvue.jsautocomplete

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

Is it better to return JSON before streaming a file through an iframe or sending HTTP headers?

I have created a form that utilizes a hidden iframe to submit a file to a script which then modifies the file and returns the altered version. I have realized that I can avoid saving the file anywhere by simply using echo file_get_contents(tmp);, where tmp ...

phpjavascripthtmlhttp

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...

javascripthtmlcsssearchfilter

Using jquery to hide an input box once a checkbox is marked as checked

Is there a way to conceal the input box for a name when a checkbox is checked? if ($("#1step").checked){ $("input[username='true']").hide(); } <input username='true'> <input type="checkbox" id="1step"><label>ste ...

jqueryhtml

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

javascripthtml

Creating a responsive HTML table in R can be achieved by using the 'DT

Below is the structured dataframe I am working with in R: Dataframe- seq count percentage Marking count Percentage batch_no count Percentage FRD 1 12.50% S1 2 25.00% 6 1 12 ...

cssrdataframehtml-tablekableextra

Guide on building a personalized button layout in Bootstrap 4

I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom. To achieve this, I added style={{position: 'fixed' ...

htmlcssreactjsbootstrap-4material-ui

What is the best way to position multiple elements within mat-card-content using Angular, CSS, and HTML

I have been attempting to align the button vertically within the mat-card-content, but without success. The title is currently left-aligned and centered vertically as desired. When I make changes to my HTML or add more divs, the alignment gets worse. http ...

htmlcssangularangular-materialstyling

Several conditional statements in JSX

In my JSX Return() code, I am encountering an "If" issue when one of my conditions has 2 different 'onClick' events. There are 2 'a' tags, where one will display button 'X' if a statement is true and the other will display but ...

javascripthtmlreactjsif-statementjsx

Is it possible to maintain tab focus instead of visual focus when navigating past the skip navigation menu for improved accessibility?

My website features an accessibility skip navigation menu that utilizes named anchors to navigate to different content areas. These content areas, including the top menu, left menu, main body content, and footer menus, contain links within them. When I u ...

jqueryhtmlcssaccessibility

Obtaining the width of a child table using Jquery

I have a question that might seem simple, but I can't figure it out. How can I use jQuery to get the width of a table that is a child of a div with the class "test"? <div class="test"> <div id="one"> </div> <table> <thead&g ...

jqueryhtml

What is the best way to remove all HTML tags from a JSON file?

I'm looking for a way to efficiently clean up a JSON file that contains improperly extracted HTML content. I need to remove all text that is enclosed in HTML tags, along with the tags themselves. I attempted to use this function: def eliminateHTML(s ...

pythonhtmlregexjsondata-cleaning

The Overflow Dilemma of Internet Explorer 6

<div style="float:left; width:50%;"> div one <div style="position:absolute; width:105%">nested element</div> </div> <div style="float:left; width:50%;"> div two </div In the case where an element exceeds the wi ...

htmlcssinternet-explorer

Just starting with Modals and struggling to make them appear when the button is clicked

Users can view all the questions stored in the database on this screen. They have the option to rearrange, delete, or add a question. When the user chooses to add a question, a modal should pop up. The current code is not responsive when attempting to add ...

htmlasp.net-mvcbootstrap-modal