CSS problem causing issues with block display in basic gallery

I've created this code:

<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff; width:auto; height:auto}

</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="a"><img src="images/p1.jpg" alt="a" width="400" height="300" /></a>
</div>
<div class="img">
 <a target="_blank" href="b"><img src="images/p2.jpg" alt="b" width="400" height="300" /></a>
</div>
<div class="img">
 <a target="_blank" href="c"><img src="images/p3.jpg" alt="c" width="400" height="300" /></a>
</div>
<div class="img">
 <a target="_blank" href="d"><img src="images/p4.jpg" alt="d" width="400" height="300" /></a>
</div>

</body>
</html>

My original intention was to create a basic gallery where the image enlarges when hovered. Everything is working fine, but now I want to set specific dimensions - like a box of 600x300px instead of taking up the entire screen. I assume I need to adjust the CSS, but I'm not sure how.

csslayout

Answer №1

To enclose your images in a container div, follow these steps:

<div id="wrapper">
    <div class="image-container">
       ...
    </div>
    ...
</div>

Next, add the CSS styles:

#wrapper { width: 600px; height: 300px; overflow: auto; }

This setup will create a container with scroll functionality and the specified dimensions. If you don't require scrolling or a fixed height, omit the height property and use overflow: hidden. This is important when the contents are floating elements (it helps the container occupy the space of the floated divs).

Answer №2

I'm a little uncertain about your question, but could this code be the solution you're looking for?

div.img a:hover img {
    border: 1px solid #0000ff;
    width:600px;
    height:300px
}

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

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

javascriptjqueryhtmlcsstwitter-bootstrap

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...

cssmenuinternet-explorerdrop-down-menudhtml

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss

Craft a backdrop with subtle hints of italics

I am looking to create a unique background for my webpage using HTML and CSS. I want to have repeated italic shades in various shades of blue, red, and white, similar to rectangular shapes. For inspiration, take a look at the design on this website: If n ...

htmlcssphotoshoprectangles

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

I am managing a platform where users have the ability to share text-based posts, and other users can engage with those posts through comments. An issue I have encountered is that once more than two comments are posted on a parent post, they start to overfl ...

htmlcss

Header with h1 formatting

I'm having trouble getting 'by Jackie' to align under the 'Bella' logo without adding excessive space. Does anyone have any suggestions on how to resolve this issue? HTML: <div class="header"> <div class="wrapper"> ...

jqueryhtmlcssheader

What is preventing Firefox and IE from displaying images fully in a list item?

I am trying to create a slideshow with two separate sliders using li elements for that purpose. It works perfectly in Chrome and Safari, but I am encountering issues in Firefox and IE. In Firefox, the slideshow works fine in quirks mode but not in standar ...

cssinternet-explorerfirefoxhtml-listsquirks-mode

Choosing the subsequent div after the current one using Jquery

I am currently in the process of creating a drop-down menu button that, when clicked, reveals the previously hidden div underneath it. The code is functioning properly without the use of $(this).next, but it is displaying all divs with the class .menudrop ...

javascriptjqueryhtmlcss

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...

css

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

javascriptcssangularflexboxcss-grid

Top approach for creating/previewing a website using PHP, CSS, and MYSQL

When creating a website that will eventually be hosted on a remote server, what is the most effective way to code and test? Here are some examples of what I mean: - Develop locally on your computer and access files from there. Should libraries and databa ...

phphtmlmysqlcssdevelopment-environment

Increased/Decreased impact

Can someone explain how the "Tell me more" effect is achieved on the website linked below? I'm familiar with the read more/less effect in jQuery, but what intrigues me is that the page cannot be scrolled unless the button is clicked. Here is the link ...

javascriptjqueryhtmlcss

What steps are involved in creating a table using Bootstrap framework?

Hey there! I need your expertise on how to create a specific layout using bootstrap: codepen.io/anon/pen/bqJdQJ <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div cl ...

htmlcsstwitter-bootstraptemplates

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

javascriptjqueryhtmlcss

What is the best method to choose a random color for the background when a button is pressed?

Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...

javascripthtmlcss

PHP library dompdf is having issues when rendering CSS styles

Trying to convert HTML with CSS styles into a PDF using dompdf. The CSS includes floats as well. Below is the snippet of my CSS and HTML code: $dompdf = new DOMPDF(); //create object //load html with css $dompdf->loadHtml('<html> <head ...

phphtmlcssdompdf

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap