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>

javascripthtmlcssimagevisibility

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

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 №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.

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

Error code 0 occurs in jQuery AJAX when there is an issue with the communication between the client

Currently delving into the world of ASP.NET and wanted to create a basic website utilizing ajax to retrieve a simple string from the server. Upon running the ajax request, an error message pops up stating An error occurred: 0 error Here's a glimpse ...

c#javascriptjqueryasp.netajax

Turning multiple .html files into a single csv using beautifulsoup

I am dealing with a situation where I have 13,000 html files stored in a folder and my goal is to consolidate all the data into a single csv file. Although I believe I have made progress in extracting the data, I am encountering challenges when it comes t ...

pythonhtmlcsvbeautifulsoup

The button's size shrinks significantly when there is no content inside

When text is absent, the button shrinks in size. I am utilizing an angular model to bind the button text: <button type="button" class="btn btn-primary" ng-bind="vm.buttonText" tooltip="{{vm.tooltipText}}" ></button> I prefer not to apply any ...

javascripthtmlangularjs

Tips for attaching a "progress" and refresh event to an ajax call while sending a file

I am currently using the FormData API and AJAX to upload files to a server in PHP-CodeIgniter. The file upload works perfectly when triggered by the file select event. However, I would like to display a progress bar next to each file being uploaded with th ...

javascriptphpjqueryajaxcodeigniter

The Material-UI DataGrid feature allows for the display of column sums, with the sum dynamically updating based on applied filters

I am struggling with calculating the sum of values in the Total Amount column of my Material-UI DataGrid. How can I achieve this and ensure that the sum is also updated when a filter is triggered? Any guidance on how to sum the entire Total Amount column ...

javascriptreactjsmaterial-uidatagrid

My goal is to develop a table that is both able to be resized and easily repositioned

I've been working on a project to develop an interactive table that can be manipulated, resized, and repositioned within a canvas. The code snippet below shows my attempt at creating this table on the canvas: var canvas = document.getElementById("dra ...

javascripthtmlcanvas

Generating pop-up upon loading with CSS3

I have searched through numerous threads and forums in the hopes of finding a solution, but I haven't been successful. My issue lies with triggering a popup on my website. I followed online tutorials to create a popup window, which I was able to do su ...

javascriptjqueryhtmlcss

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

What is the process for assigning specific tags to specific items within an array?

As I navigate through a list of students, I am encountering an issue with my tag functionality. Currently, when a student adds a tag to their container, it is being added to every student's tags instead of just the intended student. How can I modify t ...

javascriptreactjsjsx

The retrieved information remains unchanged even after modifications are made on the subsequent Next.js server-side rendered page

I'm facing an interesting scenario with my application. It consists of two main pages - one displaying user account statistics and the other allowing users to edit these statistics. Both pages are rendered on the server side. When I navigate to the fi ...

javascriptnext.jsserver-side-rendering

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

javascripthtmlnode.jscheckboxsocket.io

When using Vue.js and Quasar to implement multiple filtering forms, an issue arises where the input value disappears

I am currently exploring how to implement multi-item filtering in Quasar, a framework of Vue. At the moment, I am utilizing input and checkbox elements. Everything seems to be functioning correctly, but there is an issue with the select item disappearing. ...

javascriptvue.jsvuejs2quasar-frameworkquasar

The JavaScript error occurred: TypeError - Unable to access the property 'map' as it is undefined

import Link from 'next/link' export const getStaticProps = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await res.json(); return { props: { ninjas: data } } } const ...

javascriptreactjsnext.js

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

javascripthtmlcsscalculator

The visible overflow-x property is failing to display the excess content within the unordered list

Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...

htmlcsstwitter-bootstrap

Performing an API GET request in a header.ejs file using Node.js

Looking to fetch data from an endpoint for a header.ejs file that will be displayed on all routed files ("/", "/news" "/dogs"). Below is my app.js code: // GET API REQUEST var url = 'https://url.tld/api/'; request(url, function (error, response, ...

javascriptnode.jsexpressheaderejs

Ways to stop your Browser from Caching

Developing a Facebook app has been my recent project. One thing that really bothers me is the random occurrences where changes I make to my CSS style sheet or when adding a new Javascript function do not reflect in the browser. This can be very frustrating ...

javascriptbrowser

The Vue v-for directive encountered an unrecognized property during rendering

Trying to grasp the concept of v-for in Vue JS, especially since I am a newcomer to this framework. Since I am utilizing Django, custom delimiters are necessary. I have a script example that appends a list of objects to a data property: var app = new Vue( ...

javascriptvue.jsvuejs2

Utilize JavaScript to Trigger AJAX HoverMenuExtender in .NET

Within my C# web application, I am attempting to trigger an Ajax HoverMenuExtender using JavaScript, rather than relying on hovering over a designated control. When I set the TargetControlID of the HoverMenuExtender to a control on the page and hover ove ...

c#javascriptajax

Surprising Outcomes of Negative Margin in jQuery Animation

Unique Project Summary I am currently working on a website that incorporates a sliding menu feature. I have successfully implemented this functionality, and the display remains consistent during the animation transitions for sliding the menu in and out. T ...

javascriptjqueryhtmlioscss