Is it possible to ensure that the image stays within the viewport when using a CSS image popup on hover?

I need a solution for ensuring that the full thumbnail image stays within the viewport when hovering over a link on my page. Below is the current code I am using to create this effect:

HTML:

<span class="popup-wrap">
  <a class="popup" href="images/flamingo.jpg">flamingo
    <span>
      <img src="images/flamingo.jpg" alt="flamingo" />
    </span>
  </a>
  <a class="popup" href="images/enough.jpg">enough
    <span>
      <img src="images/enough.jpg" alt="enough" />
    </span>
  </a>
</span>

CSS:

.popup-wrap { position:relative;}
.popup span { 
    position:absolute;
    visibility:hidden;
}
.popup:hover, .popup:hover span { 
    visibility:visible;
    z-index:1;
}     
img {
  max-width: 200px;
  max-height: 200px;
}

Answer №1

If you are facing an issue with image overflow, you can resolve it by implementing the following CSS code:

  .popup-wrap {
    position: relative;
  }
  .popup span {
    position: absolute;
    visibility: hidden;
    left: 0;

    width: 100%;
  }
  .popup:hover,
  .popup:hover span {
    visibility: visible;
    z-index: 1;
    overflow: hidden;
  }
  img {
    width: 100%;
  }

By using this code, you will constrain the image within the span element, preventing any overflow and ensuring that the size of the span matches that of .popup-wrap.

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

Troubleshooting Checkbox Problem in a Perl Script Triggered by an HTML Form

Prior to presenting the inquiry, a few notes must be made clear: As someone who is not a programmer, I have been given the challenging task of making this work. My knowledge is limited to the basics, with minimal experience from previous dabbling. My skill ...

Issues with DataTable display on smaller screens

My Data-table is functioning properly, but I am encountering an issue when using the same table on a small device Snippet var data = [...] var columndef = [...] $('#tbl').DataTable({ columns: columndef, data: data, scrollY: '50vh ...

Utilizing the toggle switch functionality in Django with a boolean field implementation

My work_experience model includes an "is_working" field which is set to true when a user is currently employed at a company. I am using a toggle switch on the front end and would like to update the boolean field value for "is_working" with a click. What lo ...

Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve ...

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

I have a custom HTML template containing a table structure <table id="people" border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Salary</th> </ ...

What is the correct way to embed a script tag within a block of JavaScript code?

I'm currently working on a JavaScript code that needs to be executed inside an iframe. The goal is to insert a script tag within the JavaScript code and then append it to the parent body of the iframe. Below is the snippet of my code attempting to ach ...

Is it possible to set a foreign key in Django as read-only and still successfully submit the form without encountering any errors?

I have been attempting to set a foreign key as read-only in my Django forms. I am developing a web application with system management capabilities and I need to prevent specific users from altering a certain field after it has been submitted. class Approv ...

"Trouble with sending POST requests using Nodemailer on Node Express, seeking help

Discover the repo here: https://github.com/mcs415/nodemailer-heroku The repository is essentially a duplicate of Brad Travery's tutorial: https://www.youtube.com/watch?v=nF9g1825mwk While the node server operates on localhost, encountering a POST erro ...

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

The Multipart Parser encountered an unexpected end of stream error while in the starting state

i encounter this issue when attempting to submit a form link(rel='stylesheet',href='/stylesheets/home/profile/home_menu.css') script(type='text/javascript',src='/javascripts/perfil_editar.js') #logo_usuario img ...

Learn how to design a dynamic table that adjusts its schema based on specific breakpoints, with or without the use of Bootstrap

Is there a way to design a table that automatically changes its structure when viewed on a mobile screen? For larger screens like laptops, the table should display as follows: Email Degination Team Last Active Location [email protected] Manag ...

Two columns of equal height featuring three card UI elements

I'm currently working with Bootstrap 4 and I have a grid set up with 1 row containing 2 columns and 3 card elements. However, I am struggling to adjust the height of the blue card element to align with the yellow card element. I want both cards to ha ...

Exploring through a dynamically generated table containing JSON data

I have successfully implemented a dynamic HTML table that is populated with JSON data based on the value of a variable when the "go" button is clicked. The initial population and search functionality work flawlessly. However, I encountered an issue when ch ...

What is the best way to center an absolutely positioned div within Internet Explorer 7?

ENSURING PROPER LAYOUT CONTEXT I am working with a simple layout for my webpage. It consists of two divs that are both positioned absolutely, with one centered within the other. <div id="protocol_index_body_wrapper"> <div id="protocol_index_ ...

Which attribute stores a value for jQuery droppable?

I am currently working on a project involving droppable/draggable elements where I want something to happen when both droppable divs have an element dropped into them. var dropbox = $('#dropbox').val(); var dropbox1 = $('#dropbox1&a ...

The functionality of jQuery code can be inconsistent at times, running smoothly

I'm facing confusion with my jQuery code! It works fine sometimes, but not always. I had a similar issue with CSS too, and I initially thought it was because of the web browser. However, the problem persists. JAVASCRIPT CODE $('.glyphicon-chevr ...

The alignment of elements in the div seems to be slightly skewed

Currently, I am in the process of creating a website with the temporary name yeet.io. I am facing an issue where I am attempting to center both an input and h1 element inside a div vertically and horizontally, but they keep appearing misaligned for some r ...

Use jQuery to toggle a div inside another div when hovered over

I am trying to implement a quick view tab that appears when a customer hovers over a product. I have almost figured it out, but the issue is that once the mouse moves onto the quick view div button, it starts to fade away because technically it has moved o ...

"Exploring the process of manipulating local storage and the potential for

I am in the process of developing a web application that heavily relies on localstorage. Currently, I have it configured to save data to the local storage using this specific format: Key: Four digit number Value: My data Now, my goal is to gather all the ...

Temporarily assign a placeholder image for any broken image

Is there a way to display a default image instead of a broken image without changing the URL? I have created a template editor where users can input dynamic URLs for images. Initially, the image appears broken, but when the user sends it, the correct imag ...