problem with the visibility of elements in my HTML CSS project

Question

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS?

h1 {
  text-align: center;
}

.floating-box {
  float: left;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
}

div.float {
  padding: 50px 50px 50px 50px;
  margin: 100px 200px 100px 240px;
  border: 1px solid white;
  width: 1000px;
  height: 1000px;
}

img:hover {
  width: 300px;
  height: 300px;
  visibility: visible;
}

<h1>Move Your Mouse Over Squares to See Images</h1>
<div class="float">
  <div class="floating-box"><img src="1.jpg"></div>
  <div class="floating-box"><img src="2.jpg"></div>
  <div class="floating-box"><img src="3.jpg"></div>
  <div class="floating-box"><img src="4.jpg"></div>
  <div class="floating-box"><img src="5.jpg"></div>
  <div class="floating-box"><img src="6.jpg"></div>
  <div class="floating-box"><img src="7.jpg"></div>
  <div class="floating-box"><img src="8.jpg"></div>
  <div class="floating-box"><img src="9.jpg"></div>
</div>

javascript html css image visibility

Answer 1

Answer №1

Since the img element is not visible to allow hovering, the hover effect needs to be applied to the container div to display the img.

    img{
         visibility: hidden;
    }

        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
        img{
             visibility: hidden;
        }
        div.floating-box:hover  img{
            width: 300px;
            height: 300px;
           visibility:visible;                      
        }

   <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
      <div class="floating-box"><img src="//www.gravatar.com/avatar/b77e895475fbc6c52e27b2000ff39604/?default=&amp;s=64" height="32" width="32"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>

Answer 2

Since the img element is not visible to allow hovering, the hover effect needs to be applied to the container div to display the img.

    img{
         visibility: hidden;
    }

        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
        img{
             visibility: hidden;
        }
        div.floating-box:hover  img{
            width: 300px;
            height: 300px;
           visibility:visible;                      
        }

   <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
      <div class="floating-box"><img src="//www.gravatar.com/avatar/b77e895475fbc6c52e27b2000ff39604/?default=&amp;s=64" height="32" width="32"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>

Answer 3

Answer №2

utilize the opacity property and define the width and height

<head>

    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Hover Over Squares to Reveal Images</h1>
    <div class="float">
   <div class="floating-box"><img src="1.jpg"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>


</body>

<head>
    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
   <div class="floating-box"><img src="1.jpg"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>
</body>

Answer 4

utilize the opacity property and define the width and height

<head>

    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Hover Over Squares to Reveal Images</h1>
    <div class="float">
   <div class="floating-box"><img src="1.jpg"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>


</body>

<head>
    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
   <div class="floating-box"><img src="1.jpg"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>
</body>

Answer 5

Answer №3

Although the first answerer was mostly correct, it seems that part of your question was about seeing other pieces of images inside the container. To address this issue, simply add width: 100% to each image so they remain within the container.

To implement this change, modify the following:

h1 {
  text-align: center;
}
.floating-box {
  float: left;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
}
/* Ensure images stay contained by adding width control */
.floating-box img {
  width:100%;
  visibility: hidden;
}
div.float {
  padding: 50px 50px 50px 50px;
  margin: 100px 200px 100px 240px;
  border: 1px solid white;
  width: 1000px;
  height: 1000px;
}
/* Apply hover effect on floating-box instead of on img */
.floating-box:hover img {
  width:100%;
  visibility: visible;
}

<h1>Move Your Mouse Over Squares to See Images</h1>
<div class="float">
  <div class="floating-box"><img src="http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"></div>
  <div class="floating-box"><img src="2.jpg"></div>
  <div class="floating-box"><img src="3.jpg"></div>
  <div class="floating-box"><img src="4.jpg"></div>
  <div class="floating-box"><img src="5.jpg"></div>
  <div class="floating-box"><img src="6.jpg"></div>
  <div class="floating-box"><img src="7.jpg"></div>
  <div class="floating-box"><img src="8.jpg"></div>
  <div class="floating-box"><img src="9.jpg"></div>
</div>

When applying the hover effect, remember to target the box itself (.floating-box:hover img), not just the image.

Answer 6

Although the first answerer was mostly correct, it seems that part of your question was about seeing other pieces of images inside the container. To address this issue, simply add width: 100% to each image so they remain within the container.

To implement this change, modify the following:

h1 {
  text-align: center;
}
.floating-box {
  float: left;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
}
/* Ensure images stay contained by adding width control */
.floating-box img {
  width:100%;
  visibility: hidden;
}
div.float {
  padding: 50px 50px 50px 50px;
  margin: 100px 200px 100px 240px;
  border: 1px solid white;
  width: 1000px;
  height: 1000px;
}
/* Apply hover effect on floating-box instead of on img */
.floating-box:hover img {
  width:100%;
  visibility: visible;
}

<h1>Move Your Mouse Over Squares to See Images</h1>
<div class="float">
  <div class="floating-box"><img src="http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"></div>
  <div class="floating-box"><img src="2.jpg"></div>
  <div class="floating-box"><img src="3.jpg"></div>
  <div class="floating-box"><img src="4.jpg"></div>
  <div class="floating-box"><img src="5.jpg"></div>
  <div class="floating-box"><img src="6.jpg"></div>
  <div class="floating-box"><img src="7.jpg"></div>
  <div class="floating-box"><img src="8.jpg"></div>
  <div class="floating-box"><img src="9.jpg"></div>
</div>

When applying the hover effect, remember to target the box itself (.floating-box:hover img), not just the image.

problem with the visibility of elements in my HTML CSS project

Answer №1

Answer №2

Answer №3

Similar questions

Show or hide a div based on the visibility of another div in Angular using *ngIf

Utilizing Vue.js to connect with a Node.js server

Exploring D3 to extract nested information and build an interactive navigation tree

Aligned to the right, the ::before element stands out in the design

Angular in conjunction with socket.io does not immediately show messages on screen

Adjusting the color of specific sections within a text box

What is the best method for setting the height of an empty inline block element to match the line height of its container?

Unable to retrieve the value from an object (Javascript)

Is it possible to incorporate an additional value into the jQuery widget 'Autocomplete' by using a second variable?

Issue with kendo grid not properly saving recently added data

What is the method to ensure background images are loaded with SSL from a different domain?

What is the best way to swap out an HTML file with another without altering the link?

Saving the object returned by the useRef hook into the Redux state

Can two writable stores in Svelte be set up to subscribe to each other simultaneously?

The website is displaying a "404 Error" for the font file at the specified path "GET

Exploring the power of NodeJS with nested functions for conducting in-depth search

SVG padding will only take effect if two or more sides are specified

The functionality of an HTML form utilizing JavaScript struggles to function correctly when integrated with PHP

Encountering an error when setting up a React-TypeScript ContextAPI

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?