Text overlay effect on hovering an image

I am struggling to add text to a photo and make the entire photo clickable with a link. I have already applied a darkening effect that I want to keep, but now I need to insert text on top of it. It is important for me to maintain the current dimensions and ensure responsiveness.

Here is the codepen link for reference: 'https://codepen.io/pawe-dejda/pen/XyPzpK'

body, html {
    height: 100%;
}

.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.responsive {
    width: 100%;
    max-width: 88px;
    height: auto;
position: center;
}
.tz-gallery .row > div {
    padding: 2px;
margin-bottom: 4px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
opacity: 0.5;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dejda.e-kei.pl/nuar/css/style.css">

<div class="w3-container w3-padding-64 w3-black">
<div class="w3-content">
    <div class="tz-gallery">

        <div class="row no-gutters">

            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
</div>
 
            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
</div>


            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
              </div>
              </div>
              </div>
              </div>
  </div>
htmlcsshover

Answer №1

It seems like you're looking to overlay links on top of an image. To achieve this, follow these steps: 1. Start by creating a container div. Here's an example:

<div>
text
</div>

  1. Next, style the div with the background picture of your choice. Ensure that the div's dimensions match the size of the picture. Inside the div, you can insert the desired tag (text). For instance:

    <span> text </span>

Now comes the fun part. To position the text within the div, set the div's position to relative (position: relative;) and the span's position to absolute. Then, adjust the top/left/bottom/right values of the absolute position to place the text wherever you desire.

Answer №2

Check out the latest codepen below:

https://codepen.io/kelvinsusername/pen/YROYZM

This updated code adds a container with text inside, but the text is initially opaque. When you hover over it, instead of becoming less visible like an image, it becomes more visible.

.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}

Answer №3

.tz-gallery .row>div {
            padding: 2px;
            margin-bottom: 4px;
        }

        .tz-gallery .lightbox img {
            width: 100%;
            border-radius: 0;
            position: relative;
        }

        .img-text-box {

            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.479);
            color: #ffffff;
            width: 100%;
            padding: 20px;
            font-family: Arial;
            font-size: 17px;
        }

        .fade {
            opacity: 1;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
            color: #e9e9e9;
        }

        .fade:hover {
            opacity: 0.5;
        }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="tz-gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Dream big and work hard.</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Seize the day!</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Strive for greatness.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </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

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

My current setup involves two blue div elements connected by jsPlumb. You can view the setup here: https://jsfiddle.net/b6phv6dk/1/ The source div is nested within a third black div that is positioned 100px from the top using position: absolute;. It appe ...

javascripthtmlcssjsplumb

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

javascripthtml

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

css

Contrast between the visibility settings of display none and display block

Can you explain the contrast between a control's style being set to display: none versus display: block? ...

htmlcssstyling

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

javascripthtmlcssnull

Issues with CSS overlays arise when attempting to display a welcome page on top of a flash component

Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...

htmlcssflashiframe

The styling applied through the MUI TextField sx props does not take effect

Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...

htmlcssreactjsmaterial-uijsx

Achieving a perfect curve with a specific circle radius using CSS

I came across a design tutorial on magic indicators from YouTube and created the following design: However, I am looking to achieve a smoother curve as a continuation of the circle when selected, instead of using elements with small border-radius like in ...

css

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

javascriptjqueryhtmlinternet-explorer

Discovering the proper method to reach the parent element in jQuery while within the click event

How can I use jQuery to access the parent element within a click event? $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post&apo ...

javascriptjqueryhtmlcss

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Determine whether either of these elements has the mouse hovering over it using jQuery

In my DOM, I have two separate elements that need to change when either one is hovered over. If the link is hovered over, not only does the image src need to change (which is easy), but also the link color needs to change. Similarly, if the image is hovere ...

javascriptjqueryhoverconditional-statementsmouseover

Attempting to determine which PHP form was submitted

I'm currently working on creating multiple forms within the same page, but I've encountered an issue where the PHP code is not executing properly when attempting to submit the form. <form id="DeleteEmployeeModal" name="DeleteEmployeeModal ...

phphtml

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

javascripthtmlvariablesget

Deactivate the BACKSPACE button

Similar Question: How to disable backspace except textbox using jQuery I am looking for a solution to prevent the BACKSPACE button from functioning unless it is within a TEXT field. Although I have tried the code below, it ends up disabling the backs ...

jqueryhtml

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

Transforming DOM elements into Objects

Here are some values that I have: <input name="Document[0][category]" value="12" type="text"> <input name="Document[0][filename]" value="abca.png" type="text" > I am looking for a way to convert them into an object using JavaScript or jQuer ...

javascriptjqueryhtml

There was an issue with the Google Maps embed API that resulted in an error with interpolation

My goal is to utilize the Google Maps API in order to showcase a map using data from a JSON file. However, whenever I attempt to incorporate the JSON data, an error message 'Error: [$interpolate:noconcat] Error while interpolating' pops up. < ...

javascripthtmlangularjsgoogle-maps