Ways to conceal an HTML element using CSS

I am working with two images, but I only want to display one at a time. When I hover over the image, I want it to change.

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 100px;
  position: fixed;
  /* Stay in place */
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.8s;
  opacity: 0.8;
  box-shadow: 0px 20px 50px black;
}

.sidenav:hover {
  width: 215px;
  transition: 0.8s;
  overflow: hidden;
}

.sidenav img {
  height: 10%;
  width: auto;
  padding-left: 13px;
  transition: 0.8s;
}

.hovered {
  visibility: hidden;
  opacity: 0;
  height: 13% !important;
  transition: 0.5s;
}

.sidenav:hover img:first-child {
  visibility: hidden;
  opacity: 0;
}

.sidenav:hover .hovered {
  visibility: visible;
  opacity: 1;
}
<div class="sidenav">
  <img src="../img/10.png">
  <img src="../img/logo1.png" class="hovered">
</div>

For my current project, I am trying to figure out how to hide the second image element without leaving a blank space. I have avoided using display: none; due to the transition effect. Can anyone provide a suggestion or solution? Thank you in advance.

htmlcss

Answer №1

It is recommended to utilize CSS whenever possible, and fortunately, for your specific needs, CSS is a viable option.

I have personally implemented this approach for a similar requirement in the past.

HTML : 

<a class="bar" href="#">
  <img src="http://lorempixel.com/400/200/food/1/" />
  <img src="http://lorempixel.com/400/200/food/2/" />
</a>

CSS :

.bar img:last-child {
  display: none
}

.bar:hover img:first-child {
  display: none
}

.bar:hover img:last-child {
  display: inline-block
}

JSFiddle : http://jsfiddle.net/abc123/xyz456/

Answer №2

When hovering over the image, incorporate the CSS style position: absolute; along with top: ...; left: .... This will ensure that the second image appears above the first one. Feel free to adjust the positioning using the top, left parameters as needed.

Answer №3

Utilize position:absolute for the second image placement.

See below for an illustration, demonstrating the use of placeholder images in this code snippet

.sidenav {
        height: 100%; /* 100% Full-height */
        width: 100px;
        position: fixed; /* Stay in place */
        z-index: 2;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow: hidden; /* Disable horizontal scroll */
        padding-top: 20px;
        transition: 0.8s;
        opacity: 0.8;
        box-shadow: 0px 20px 50px black;
    }
    .sidenav:hover{
       width: 215px;
       transition: 0.8s;
       overflow: hidden;
    }
    .sidenav img{
      height: 10%;
      width: auto;
      padding-left: 13px;
      transition: 0.8s;
    }
    
    .hovered {
      visibility: hidden;
      opacity: 0;
      height: 13% !important;
      transition: 0.5s;
      position:absolute;
      top:20px;
      left: 0;
    }
    
    .sidenav:hover img:first-child{visibility: hidden; opacity: 0;}
    .sidenav:hover .hovered{visibility: visible; opacity: 1;}
<div class="sidenav">
       <img src="https://dummyimage.com/qvga">
       <img src="https://dummyimage.com/skyscraper/f0f/f" class="hovered">
    </div>

Answer №4

Minimize unnecessary jquery usage by implementing a simple change instead.

Update the CSS definitions with the provided code snippets and make the necessary adjustments in the HTML as shown below.

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 100px;
    position: fixed;
    /* Stay in place */
    z-index: 2;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
    transition: 0.8s;
    opacity: 0.8;
    box-shadow: 0px 20px 50px black;
}
.sidenav:hover {
    width: 215px;
    transition: 0.8s;
    overflow: hidden;
}

.sidenav .hover_image {
    height: 10%;
    width: 90px;
    padding-left: 13px;
    background-image: url('https://dummyimage.com/90x20/1b0/242499.png&text=Regular');
    background-position: left top;
    background-repeat: no-repeat;
}

.sidenav:hover .hover_image {
    height: 13% !important;
    width: 205px;
    background-image: url('https://dummyimage.com/205x28/cb0/242499.png&text=Hovered');
}
<div class="sidenav">
  <div class="hover_image">&nbsp;</div>
</div>

Ensure to adjust the height and width values for the correct image size and verify the image path. It is essential to use pre-scaled, optimized images to avoid browser scaling issues.

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

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

Outlook-2010 does not support the current display

Looking for help styling a page that will be opened in ms-outlook 2010. The issue is that it does not support the display attribute. Anyone have a recommendation for an alternative? One suggestion could be to create a class with properties similar to disp ...

htmlcssoutlookoutlook-2010

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

htmlcss

Switch to a different webpage based on radio button selections in a PHP script

On my webpage, I have two pictures that act as radio buttons, along with a "proceed" button. However, when I click on the button, it does not redirect to the desired page. Below is the code for my form and PHP processing page: <body> <fo ...

phphtmlhttp-redirectradio-button

Tips for adjusting an image to fit your carousel

I am dealing with a carousel that has fixed dimensions (e.g., width=800px, height=450px), but the images I want to display in it have varying aspect ratios (16 : 9, 16:10, 1:1, etc.) and are larger than the carousel itself. I am attempting to resize all th ...

cssbootstrap-4

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

htmlcsswebbootstrap-4

Utilize HTML code within a .php file without it being parsed

When I include HTML code in my PHP file, the HTML code doesn't get interpreted and just appears as text in the browser. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> ...

phphtml

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

javascriptjqueryhtml

What factors influence the timing of Chrome's spell-check feature for a particular word?

Currently, I am troubleshooting a bug in our code that is related to text input behavior. The issue at hand is that in one field, when you start typing on Chrome, the word does not get red underlined until you press space. However, in another field, Chrom ...

htmlgoogle-chromeautocorrect

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design

Linking a button to a (click) event within HTML content fetched from the backend

Hey there, I'm facing a scenario where I have an angular service that sends a HTTP request to the backend for some HTML code. Once the HTML is received, I'm inserting it into the component's HTML using <div [innerHTML]="..."/>. The iss ...

htmlangular

Arrange divs next to each other using CSS

I am currently working with a basic layout on my webpage <div id="content-wrap"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div ...

htmlcss

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

htmltwitter-bootstrapbootstrap-5

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

"Disappearing act: box-shadow magically vanishes

Currently facing a perplexing issue: In my code, there is a div called .pagebody with a box shadow assigned as follows: -webkit-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); -moz-box-shadow: 0px 1px ...

htmlcss

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript. Is there a way to achieve this? ...

htmlcssbootstrap-5

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox