Expand image horizontally on hover in CSS

Question

I want to build a home page for a website project I'm doing with some friend where the whole page will basically be three images one next to the other like so:

|1|2|3| --hover--> |1    ||| or --hover--> ||2     || or --hover--> |||3    |

each "square" with a number representing an image. The squeezed "squares" are like very small openings for switching to another image by hovering on them.

Now my idea was to have each image expand over the remaining two when the user hovers over it.

I've found this (http://jsfiddle.net/harmeister/a4n6e/18/) which is kind of what I'm looking for, but I'm not good enough to adapt it to my needs. Ideally, some text would appear on the expanded image, but I think I know how to do that.

I am not sure if this is possible in pure CSS, but that's what I'd prefer.

Answer 1

1. Here's a basic one with pure css where the images overlay each other and use z-index to show full width on hover. It's responsive.

fiddle

https://jsfiddle.net/Hastig/tybscnhm/4/

.images {
  display: flex;
  background-color: red;
  overflow: hidden;
    transition: all 1.2s ease;
}
.image-container {
  position: relative;
  display: flex;
}
.image-container:not(:nth-child(1)) {
  position: relative;
  margin-left: -10%;
}
.image-container img {
  max-width: 100%;
}
.image-container:hover {
  z-index: 1000;
}

<div class="images">
  <div class="image-container">
    <img src="http://i.imgur.com/mOSCZCo.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/zFYHM67.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/VMh4FNX.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/XNVJztM.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/quwEgMO.jpg">
  </div>
</div>

2. A quick one I threw together using flexbox and jquery for hover toggle.

The hovered image doesn't expand over other images but instead stretches while the others squeeze.

Currently requires a fixed height on container and needs transition effects added. Needs lots of work but it is responsive.

fiddle

https://jsfiddle.net/Hastig/trhgfbc8/1/

$('.image-container').hover(
  function() {
    $('.image-container').not(this).toggleClass('squeeze');
    $(this).toggleClass('stretch');
  }, 
  function() {
    $('.image-container').not(this).toggleClass('squeeze');
    $(this).toggleClass('stretch');
  }
);

.images {
  display: flex;
  background-color: red;
  overflow: hidden;
  height: 200px; /* fixed height, needs work */
    transition: all 1.2s ease;
}
.image-container {
  display: flex;
  overflow: hidden;
}
.image-container img {
  display: flex;
  max-width: 100%;
}
.stretch {
  width: 50%;
}
.squeeze {
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="images">
  <div class="image-container">
    <img src="http://i.imgur.com/mOSCZCo.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/zFYHM67.jpg">
  </div>
  <div class="image-container">
    <img src="http://i.imgur.com/VMh4FNX.jpg">
  </div>
</div>

I played around with the code from the selected answer a bit to try and get something similar while being responsive that I can use in my own designs. Nothing as perfect yet but here they are.

3 This responds to screen width while maintaining container height. It gets a little squished at narrow screen widths, will have to play with height with media queries. (doesn't work on chrome, i assume ie/edge as well)

https://jsfiddle.net/Hastig/z7zwec1j/3/

4. Here's another responsive one that can handle different image dimensions, albeit a little awkwardly, height-wise. (doesn't work on chrome, i assume ie/edge as well)

https://jsfiddle.net/Hastig/z7zwec1j/2/

5. 1st image needs work

https://jsfiddle.net/Hastig/tybscnhm/8/

Answer 2

EDIT I believe you are looking for this.

/*Now the styles*/
* {
	margin: 0; 
	padding: 0;
}
body {
	background: #ccc; 
	font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
	width: 805px; height: 320px;
	overflow: hidden;
	
	/*Time for some styling*/
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

<div class="accordian">
	<ul>
		<li>
			<div class="image_title">
				<a href="#">KungFu Panda</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Toy Story 2</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Wall-E</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Up</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Cars 2</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
			</a>
		</li>
	</ul>
</div>

Answer 3

I believe this will solve your problem http://jsfiddle.net/3j239uvk/

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="150" height="100" name="image_name"
onmouseover="image_name.width='200';image_name.height='100';"
onmouseout="image_name.width='100';image_name.height='100';" />

The 'onmouseover' shows the properties for the image while the mouse is hovering it, the 'onmouseout' shows the properties when the mouse isn't hovering.