Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it.

HTML:

   <html>

    <link REL=StyleSheet HREF="HOVERTEST_02.css" TYPE="text/css" MEDIA=screen />

    <h1>FS STUDIO</h1>

    <h2><span>Automation(FS1920)</span>.
        <img src="https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg"/>
    </h2>

<h2><span>Platforms(1819)</span>
    <img src="https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg"/>
</h2>

CSS:

img{
    display:none;
}

span:hover + img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    height: 600;
    width: device-width;
    opacity: 0.8;
}
htmlcssimagebackgroundhover

Answer №1

To prevent the image from affecting the text position, you should use position: absolute.

By doing this, the image will not interfere with other elements on the page and allow the text to be displayed properly. You can see a quick demo above:

UPDATED VERSION

img{
      display:none;
      width: 50vw;
      height: 40vw;
      position: absolute;
      top: 5vh;
      right: 10vw;
    }

    span:hover + img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      height: 600;
      width: device-width;
      opacity: 0.8;
    }
<h1>FS STUDIO</h1>

    <h2><span>Automation(FS1920)</span>.
        <img src="https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg"/>
    </h2>

    <h2><span>Platforms(1819)</span>
    <img src="https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg"/>
    </h2>

Answer №2

Are you referring to this?

 span.one:hover{
  background-image: url('https://www.applerubber.com/blog/wp-content/uploads/2015/07/Float_Glass_Unloading.jpg');
  }
  span.two:hover{
  background-image: url('https://njmonthly.com/wp-content/uploads/cache/2018/11/Amazon_AFradkin_4440b/1072634020.jpg');
  }
 <h1>FS STUDIO</h1>

    <h2><span class="one">Automation(FS1920).</span>
        
    </h2>

<h2><span class="two">Platforms(1819)</span></h2>

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

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

cssimagehtml-listsalignment

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...

javascripthtmlcssreactjsmaterial-ui

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

c#htmlasp.net-mvcrazorhtml-helper

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

javascriptjqueryhtmlcss

Integrating md-chips md-separator-keys with md-autocomplete: A step-by-step guide

My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...

htmlangular-material

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

How to Extract Information from a Table Enclosed in a Div Using HTML Parsing?

I'm new to HTML parsing and scraping, looking for some guidance. I want to specify the URL of a page (http://www.epgpweb.com/guild/us/Caelestrasz/Crimson/) to grab data from. Specifically, I'm interested in extracting the table with class=listing ...

jqueryhtmljsonparsingscreen-scraping

Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance. Link to image Here is a snippet of my HTML code: & ...

htmlcss

Issue encountered while transferring files between a web platform and an API

Currently, I am working on two separate projects. The first project involves a website where users can upload files, and the second project is an API designed for file uploads due to the limitations of the old website. I am utilizing Laravel (6) to develo ...

jqueryhtmlajaxlaravelpost

The functionality of toggling Jquery with the datepicker is malfunctioning

I am in the process of creating a calendar input field that includes a datepicker for each input box. HTML <select id="select"> <option value="Type">Type</option> <option value="Range">Range</option> <option val ...

phpjqueryhtmldatepicker

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

phpjavascripthtmlwordpressforms

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

csstwitter-bootstrap

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

Display the code exactly as it appears

Important Note: I have to insert the following code three times in the HTML body of a static webpage. Instead of repeating it multiple times and cluttering the code, I prefer to have a single line (repeated three times) that calls the function to output th ...

phphtmlescaping

Populate a table cell with a div element in HTML

How can I make a div inside a rowspanned table cell 100% high of the cell? Check out this example for reference: https://jsfiddle.net/gborgonovo/zqohw286/2/ In the provided example, I want the red div to vertically fill the yellow cell. Any suggestions on ...

htmlcss

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

htmlajaxspring-bootpopup

Creating CSS-style overlayed images that are resizable

I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...

htmlcss

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

Ways to remove the line under a logo in HTML using CSS and Bootstrap

While working on a website design, I encountered an issue with the logo where it has a line of the background color under it. This is frustrating and affects the overall design. Does anyone have a straightforward solution to remove this line? I need someth ...

htmlcsstwitter-bootstrapimage