Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process.

Below is my code with hover effects but without a horizontal scrollbar:

<!DOCTYPE html>
    <html>
    <head>
    <style>

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

</style>
</head>
<body>


<div class="container">
  <img src="lb.jpg" alt="" class="image" style="width:100%">
  <div class="middle">
   <img src="bungalow.jpg" alt."">
</div>
</div>

<div class="container">
  <img src="lb2.jpg" alt="" class="image" style="width:100%">
  <div class="middle">
   <img src="bungalow2.jpg" alt."">
</div>
</div>

 <div class="container">
  <img src="lb3.jpg" alt="" class="image" style="width:100%">
   <div class="middle">
   <img src="bungalow3.jpg" alt."">
</div>
</div>

</body>
</html>

And here is my code with a horizontal scrollbar but no hover functionality:

<!DOCTYPE html>
<html>
<head>
<style>

.slide-container {
  overflow: auto;
   white-space: nowrap;
 }

</style>
</head>

<body>

  <div class="slide-container">
  <img id="slideone" src="lb.jpg" />
  <img id="slidetwo" src="lb2.jpg" />
  <img id="slidethree" src="lb3.jpg" />
  <img id="slidefour" src="lb4.jpg" />
   </div>

</body>
</html>

My aim is to merge these two functionalities seamlessly!

Answer №1

Are you seeking a way to align all images horizontally with a scroll bar? If so, you will need to create a wrapper with a fixed width and apply the overflow-x: auto property.

.parent-container {
            width: 1000px;
            height: 400px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
}

Check out this link for an example on CodePen

Answer №2

To create a layout with two images in each container, you will need to use a div as a parent for the images and give them proper positioning. Here's an example that demonstrates this concept:

UPDATED

HTML :

<div class="imgHolder">
  <div class="parentImage">
    <img src="http://lorempixel.com/400/200/sports/1" alt="" class="image1"/>  
    <img src="http://lorempixel.com/400/200/sports/2" alt="" class="image2"/>
</div>

<div class="parentImage">
   <img src="http://lorempixel.com/400/200/sports/3" alt="" class="image1"/>  
   <img src="http://lorempixel.com/400/200/food/1" alt="" class="image2"/>
</div>

CSS :

.imgHolder{
      overflow:scroll;
      height:230px;
      width:400px;
       display:inline-flex;
}

.imgHolder img {
     width:400px;
     height:200px;
 }
.parentImage{
  position: relative;
  top: 0;
  left: 0;
}

.parentImage > .image1{
  position: relative;
  top: 0;
  left: 0;
}

.parentImage > .image2{
  position: absolute;
  top: 0px;
  left: 0px;
  opacity:0;
  padding:5px 10px 5px 10px;

  width:95%;
}

.parentImage:hover > .image1{
   opacity:0.3;
}

.parentImage:hover > .image2{
   opacity:1;
}

https://jsfiddle.net/emilvr/f9xd75uv/2/

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

To open a popup menu with a text box, simply click on the text box

Whenever the text box text is clicked, a popup menu should open with a text box. Similarly, when the filter icon in the right side corner is clicked, a menu should open with a list of checkboxes. However, currently both menus are opening when clicking on b ...

Nextjs server encountered an issue where it was unable to connect to the localhost

npm run dev > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563239352239247b372626393f38223b3338227b3439393d3f38317b2133347b372626166678677866">[email protected]</a> dev > next dev ▲ Next.js 14.2. ...

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

I attempted to include multiple images in my HTML using Vue.js, but encountered an error message stating "illegal invocation"

Here is my HTML code: <form method="POST" v-on:submit.prevent="handleSubmit($event);"> <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">Name</label> <input ...

Sending both a standard jQuery array and a multidimensional array through AJAX to PHP

Currently, I am utilizing AJAX to perform calculations as individuals populate a form. One challenge I am encountering involves passing two different types of arrays through AJAX and manipulating them in PHP. The first array consists solely of ID's, w ...

The Django/Python function, toDataURL, outputs a response containing the string retrieved from the toDataURL method

I recently stored a string in a database that was returned by a javascript method called toDataURL. An example of the string can be found here: http://pastebin.com/0Qu8rngD My goal is to retrieve the image in a Django response. I've attempted various ...

Error: The requested resource, youtube#videoListResponse, is currently unavailable

When attempting to access a YouTube playlist that includes private videos, the bot will encounter an error message. Error: unable to locate resource youtube#videoListResponse Below is the code snippet in question: if (url.match(/^https?:\/\/(w ...

What steps should I take to ensure that jQuery functions remain functional on loaded code?

I have implemented modals on all my pages except for the first one to save time. Here is the script that loads my modals: $(function () { $('#header').load('reusenavbar.php'); $('#loginModal').load('reuseloginmo ...

Utilizing AngularJS Directive to trigger a designated function upon change in an input file

My current project involves creating a scavenger hunt editor with various types of questions stored in an array. Each question can be of a different type, all displayed using ng-repeat. To achieve this, I utilize a JavaScript object representing a Questio ...

Obtaining a URL in JavaScript

Hey there, I'm diving into the world of JavaScript and could use some guidance. I'm currently working on implementing forward and backward buttons on a webpage. The URL structure is http://webaddress.com/details?id=27 My goal is to write two fun ...

Dynamically load npm modules in Webpack using variables for the require statement

Is there a way to dynamically require an NPM module using a variable? Below is the sample code I've been trying, everything seems to be working fine except for importing NPM modules dynamically. const firstModule = 'my-npm-module'; const s ...

Using Angular 5 to integrate a jQuery plugin

Recently, I've started learning Angular and am currently using version 5. I need to integrate a plugin called 'jquery-circle-progress' into my project. The plugin can be found at this link: I managed to install the plugin using npm and adde ...

To access an RSS feed, use Google Chrome as your browser

I am struggling with my .php script that generates an RSS-Feed on-the-fly. My goal is to attach a .css stylesheet to this script so that browsers lacking a built-in RSS-viewer can properly display the feed. I achieved this using the following code snippet ...

React-Native-SVG encountered an error: Invariant Violation - the component "RNSVGGroup" could not be found in the UIManager

Trying to create an SVG in React-Native using react-native-svg. I have set up a React-Native-CLI. After doing some research, I attempted to solve the issue on my own and found something useful. I tried running cd ios && pod install. I wasn't ...

React: Selecting Component Name Based on Provided Property

My goal is to dynamically load an icon component in React passed as a prop from the parent component. Dashboard (parent): import { Button } from './components'; function App() { return ( <div className="app"> <d ...

Transforming the output from a processor into an array structure

Being a newcomer in the field of development, I have a question about how to retrieve data based on my requirements and what is considered the best practice? This is the structure of my design: JavaScript (Ajax call) >> ashx handler (Access databa ...

Should we define all public methods or prototype each method separately?

Typically, when I create a library, my approach is as follows: var myLibrary = (function() { return { publicProperty: 'test', publicMethod: function() { console.log('public function'); }, ...

Typography splits into a second line within the grid on the toolbar

I need help with my Appbar design. I want to align the title (Lorem ipsum text) on the left and the buttons on the right. However, when I tried implementing the code below, I noticed that there seems to be a maximum width causing the text to break into t ...

Performing simultaneous document queries within a single API in MongoDB

I am currently working with an API written in typescript and attempting to execute parallel queries for the same document by using Promise.allSettled. However, I have noticed that it is performing poorly and seems to be running sequentially instead of in p ...

Django form validation issue - cannot proceed as input is missing in required field

Trying to integrate HTML5 date input (start and end dates) into Django forms for querying orders based on user-specified dates at the front-end. Users input start and end dates, which are then passed to my Django model and through an AJAX call. https://i. ...