Slide Image On Hover Using A Css Transition

Here’s a comprehensive tutorial on how to slide image on hover using a CSS transition. This effect provides an engaging way to display additional content or create an interactive image gallery. Let’s break down the process step-by-step.

Adding Header Assets

First, include necessary header assets in the section of your HTML document. These assets will enable cross-browser compatibility and provide a foundation for styling.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

Constructing the HTML Structure

Now, let’s build the HTML structure. We’ll create a container `div` with the ID `slidingWindow` to hold the images, and individual `div` elements with the class `slidingSection` for each image and its associated information.

<div id="slidingWindow" ontouchstart="">
  <div class="slidingSection"><img src="http://lorempixel.com/200/200/nature/4" />
    <p>Image Info</p></div>
  <div class="slidingSection"><img src="http://lorempixel.com/200/200/nature/2" />
  <p>Other Image Info</p></div>
</div>

Styling with CSS

Next, we need to add the CSS to bring the sliding effect to life. We’ll define styles for the `slidingWindow` container, the `slidingSection` elements, and the images within them. The key to the sliding effect is using `transform: translate3d()` in combination with the `:hover` selector and `transition` property.

#slidingWindow {
  display: flex;
  margin: 1em 4em;
  overflow: hidden;
  width: 210px;
  height: 250px;
  border: 1px solid #9f8e60;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2YzI1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYTI0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: linear-gradient(to bottom, #d6c25c, #b3a24d);
  box-shadow: 0 2px 3px rgba(31, 31, 31, 0.8);
}

#slidingWindow,
.slidingSection,
img {
  border-radius: 2px;
}

.slidingSection {
  margin: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNkZWUwOWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NDgxMzEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: linear-gradient(to bottom, #dee09e 60%, #648131);
  width: 200px;
  min-width: 200px;
  height: 240px;
  text-align: center;
  border: 1px solid #a98e70;
  transform: translate3d(0, 0, 0);
  transition: transform 450ms linear;
}

#slidingWindow:hover > .slidingSection {
  transform: translate3d(-210px, 0, 0);
  transition: transform 450ms linear;
}

img {
  display: block;
  width: 200px;
  height: 200px;
  border: 0;
  outline: 0;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(64, 64, 64, 0.4);
}

p {
  position: relative;
  margin-top: 0.65em;
  font-family: sans-serif;
  text-shadow: 0 1px 0 #c9c29c;
}

body {
  min-height: 100%;
  background: #f5cfa3;
}

Final Thoughts

Hopefully, with these steps, you have successfully implemented the slide image on hover effect using CSS transitions!