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

The CSS code is effective on one page but fails to render on the other

I am in the process of creating a website for my jewelry business and it's my first time doing so. I'm facing an issue where the CSS styles are being applied to one page but not to the other, even though both HTML files have the same code linking ...

htmlcssbrowser

Combining the elements within an array of integers

Can anyone provide insight on how to sum the contents of an integer array using a for loop? I seem to be stuck with my current logic. Below is the code I've been working on: <p id='para'></p> var someArray = [1,2,3,4,5]; funct ...

javascripthtmlfor-loop

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

htmlcssreactjsbootstrap-5

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...

cssgoogle-maps-api-3

Retrieve an image located outside of a container

I have multiple SVGs inside separate div elements. <div id="divA"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="130" width="500" style="fill: #000000"/> ...

javascriptjqueryhtmlsvg

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Looking for a solution in Bootstrap 4 that mirrors the offset feature in Bootstrap 3, but pushes a div to the left instead of right. Need a way to have multiple dynamic divs within a row, where one div is pushed to the left on its own row without the nee ...

htmlcssbootstrap-4

Webpage not resizing when WebView orientation changes

While developing my android app, I encountered an issue with the WebView. When I am at the very top of the WebView and switch my phone to landscape mode, the webpage does not resize properly to fit the screen. It only takes up half of the screen. However, ...

androidhtmlwebviewresize

Update the href attribute when a button is clicked

Note: The buttons in the corner will not be submitting the search. The go button would still need to be clicked to submit it. Currently, I am working on a fun project during my free time at work. This project is not meant to be anything serious, but rathe ...

javascriptjqueryhtml

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

cssreactjsstyled-componentsjssemotion

Hover or click on HTML input type using CSS in your webpage

I am currently working on adding hover effects to my elements. I have successfully added a hover effect to the outer list item, but I am wondering how I can achieve the same effect on the <input> element instead of the <li>. ul.slides li:hov ...

jqueryhtmlcss

If no other columns are present, ensure a column with a width of 9 fills the entire width

While working with Foundation 6, I encountered a situation where I had a large-3 column next to a large-9 column. The issue was that sometimes the large-3 column might not be present. In such cases, I wanted the remaining column to expand and fill up the ...

htmlcsszurb-foundationgrid-layout

Ways to animate elements while scrolling in React.js?

I am new to using React.JS and currently working on setting up an E-commerce Store. My goal is to have 5 images stack on top of each other and move together as the user scrolls. I used to achieve this effect in Vanilla JavaScript by adding a window.addEven ...

cssreactjsanimationscroll

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

Why isn't the virtual directory in IIS 7 pointing to the root website?

I need to set up a virtual directory in IIS 7 that will point to the root of a website on our server. Here is an example of the structure: Websites: | --- AssetsServer | - /images/ | - /css/ | - etc. | --- demoserver ...

htmlcssiis-7virtual-directory

What is the best way to make jQuery not consider hidden elements?

Apologies for not sharing the code, as I know many of you prefer to see it. I am currently working on developing a comprehensive calculator for my small business, and I am aware that I am making several mistakes. I kindly request that you do not critique ...

jqueryhtmlcsshidden

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

How can I prevent a child div from activating the hover effect on its parent div?

I am currently exploring how to create a child element with position: absolute that is placed outside of its parent element without triggering the parent's :hover effect. Despite the parent having a hover effect, the child elements will still activat ...

htmlcssinheritancehover

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

My HTML structure uses ul and li elements as shown below: <ul class="treeview" id="productTree"> <li class="collapsable lastCollapsable"> <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div> <span ...

javascriptjqueryhtmlhtml-lists

jQuery-powered unique serial numbers for tables

I've encountered an issue with my dynamic table that consists of 2 dynamic rows including students, their subjects, and marks. The code in question is provided below: Feel free to check out the code here Snippet for Serial Number function gene ...

jqueryhtmlserialization

Guide to showing video files stored in a folder on a PHP template

I am working on a project similar to the functionality of this website: As you can see, when you click on any video, it takes you to the same page with the video playing being the only difference. I want to implement this feature on my website as well. ...

phphtmlget