Page 1 of 1

How To Make Image Slide Overs Rate Topic: -----

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 02 November 2011 - 12:32 PM

Hey guys! Today I'll be showing you how to make an image slide over. Like what I have on my portfolio(http://terryjune.me/portfolio). In case you don't want to visit the site, here's an image of what I'm talking about:

Now, that's not that hard to recreate, it's plan simple once you get down to the core of it. Do note that I will be using some CSS3 properties to help recreate that. Lets begin shall we?

First off you need an HTML document. I usually use the same structured document for the beginning of a project, it looks like this:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		
		<title></title>
		
		<!-- Stylesheets -->
	</head>
	
	<body>
	
	</body>
</html>


It's rather basic isn't it? Most of our primary focus will be below the “Stylesheets” comment and inside the body tag. I also use a basic division structure for each item. Also on my site I'm using a CSS framework that I created called Oxygen, it includes a CSS reset and a fluid grid I made, so what we make here will be a little different as it'll be fixed width and won't include the CSS reset that I use on my site.

Each item has a container. I happen to call that container portfolio_item, but here we'll call it slide_over to make it go more for the tutorial. I do a lot of styling to this container by adding a border, border radius, etc. It's also where the text and image are going to be located.

<div class="slide_over">

</div>


I guess that we can move over to the CSS that will be applied to that class. As I said, it's going to have a border radius and a border, but there's a few other styling we must add. I also forgot to say earlier that I use em for measurements. You can read up it more at Wikipedia(http://en.wikipedia.org/wiki/Em_(typography) ) Usually browsers display typography at 16px by default (you could always set a default yourself though on all your elements). If it's 16 by default .5em would be 8px and .4 is 6.4px. Keep that in mind as you see my next bit of code:

.slide_over {
	border: 0.4em solid #EEEEEE;
	-webkit-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
			
	height: 200px;
	width: 200px;
			
	position: relative;
}


The most important part of this class happens to be at the bottom of it, position: relative;, that property makes it so that div is relative to it's current location, including all child elements of that division ;)

You'll notice that on my portfolio the whole area is a big giant link as well. That isn't really needed to produce an image rollover, but if you guys want me to add that to the tutorial leave a comment :).

Now, let's get the image up on there, I do assume that you guys know basic HTML tags and that you know how to get an image element on the page, but don't worry, as always I have the codez :D.

<img src="blah.png" alt="This picture is of blah." />


You'll notice that I use the alt (alternative) property of the image element, the reason being is that I know that not everyone in the world can see or can see images clearly without glasses, etc. Due to me knowing that I can easily prepare for those who have screen readers which will read off alt text. Also, if the picture isn't available or can't be found, the alt text will be used in it's place instead of a picture of a broken picture XP.

Lets just go to the last part of the HTML. For the last part I wrap everything in a span element and I also put all of the text in the small element (I also italicize the text on my portfolio). I'll do similar here :)

<span>
	<small>hahaahahahahhaha blah blah</small>
</span>


I basically use the span to wrap the entire small element which will have most of the styling. The small is mostly just there for applying styling to the text on inside of the image.

Now lets get back to design and the CSS of this. When I say design of this I mean how do we/ how are we going to go about doing what I have. You'll notice that when you hover an item the background turns to a semi-transparent background. I guess you could use HEX and the opacity property of CSS, but that would be troublesome. You could use RGBa (RGB colors with an alpha transparency), but I think the easiest way is HSLa (hue, satuation, and lightness with an alpha transparency) colors. These are probably less heard of to you, but I love using them. I tend to use them for anything I plan to add an alpha transparency to or if I don't need to use HEX colors. In this case we don't need hex colors. You can read more on HSL colors at the W3C(http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color ), which is perhaps the best place ;)

Yay! We should have the HSL stuff out of the way, I can now show you some more code :D. When you hover over an image we're going to want the text to change to another color, so lets do that. We want the text to be easy to read on the semi-transparent background, so I advocate the use of the color white as it will provide great contrast. Here's what I have for the CSS:

.slide_over span {
	color: hsl(0, 0%, 100%); /* white as HSL */


That's all we need to do to get the text to be white, not that much is it? You can find online converters if you need to get HEX or RGB colors to HSL, but they may not be exactly the same.

By default, we don't want the span with the text to display. That will require the use of only one property to hide BTW add this to the end of the above color code ;):

	display: none;
}


We're almost done! All we need now is a way for the span to appear. Now when we hover over the image we'll want to produce a semi-transparent background which I have in place using HSLa. Also, in order to get the span to actually display we need to switch the the display property to block. And since the parent container of the span, .slide_over, is position relative and we want the text to go over the top of the image itself, we will have to set the position to absolute and the top and left to 0. As code this looks like:

.slide_over:hover span {
	background-color: hsla(0, 0%, 0%, 0.7);
			
	display: block;
			
	position: absolute;
	top: 0;
	left: 0;
			
	height: 100%;
	width: 100%;
}


All together the code should look similar to:
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		
		<title></title>
		
		<!-- Stylesheets -->
		
		<style type="text/css">
		.slide_over {
			border: 0.4em solid #EEEEEE;
			-webkit-border-radius: .5em;
			-webkit-border-radius: .5em;
			border-radius: .5em;
			
			height: 200px;
			width: 200px;
			
			position: relative;
		}
		
		.slide_over span {
			display: none;
		}
		
		.slide_over span {
			color: hsl(0, 0%, 100%);
		}
		
		.slide_over:hover span {
			background-color: hsla(0, 0%, 0%, 0.7);
			
			display: block;
			
			position: absolute;
			top: 0;
			left: 0;
			
			height: 100%;
			width: 100%;
		}
		</style>
	</head>
	
	<body>
		<div class="slide_over">
			<img src="blah.png" alt="This picture is of blah." />
			
			<span>
				<small>hahaahahahahhaha blah blah</small>
			</span>
		</div>
	</body>
</html>


Do note that I used internal styling, I would suggest using external styling though.

There are many ways you guys could expand onto this. You could change colors, apply some CSS3 transitions, and many other goodies. Let me know what you guys think of this tutorial. If it is well received I may do follow ups of it on my blog ;)

Is This A Good Question/Topic? 3
  • +

Replies To: How To Make Image Slide Overs

#2 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Posted 07 November 2011 - 11:26 AM

Nice work yes i logged into DIC again just to say that :P
Was This Post Helpful? 0
  • +
  • -

#3 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 07 November 2011 - 11:58 AM

haha. Thanks Zack. I do plan on doing a follow up to this tutorial that includes CSS3 styling on my blog so watch out for that :)
Was This Post Helpful? 0
  • +
  • -

#4 atraub  Icon User is offline

  • Pythoneer
  • member icon

Reputation: 759
  • View blog
  • Posts: 2,010
  • Joined: 23-December 08

Posted 21 May 2012 - 10:03 PM

The image and this link are both broken :(
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1