Text over image using CSS transitions

问题:

I am an illustrator making a portfolio site. I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image.

回答1:

Do you mean something like this - DEMO?

What I've done is, I've created two classes (.pic and .text). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text appear when you :hover over the image I just transition the height of .text, in this case from 0 to 150px;

Here the code from my demo

HTML

<div class="pic"><img src="http://placekitten.com/200/300" />
    <div class="text"><p>This is a cat</p></div>
</div>

CSS

.pic {
    position: relative;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

.text {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 0;
    text-align: center;    
    background: rgba(255, 255, 255, 0.7);
    transition: height 0.7s ease-out;    
}

.pic:hover > .text {
    height: 150px;
}

回答2:

by rolling over the image, do you mean mouse-over event? this can be done in multiple ways. but probably if you dont have too much css or javascript knowledge. then just download an image caption plugin. one such plugin that comes to my mind is called jquery capty. just google it and follow instruction of adding like 2 lines of code. its that simple.

another way is using CSS positioning of the caption text over the image and use display:none initially and on mouse hover event, use the css :hover pseudo class and give it display: inline-block. hopefully this helps

回答3:

The best way to do this would be to add a :hover event within your CSS file once you're within Dreamweaver.

Something similar to this:

.class {
    background: blue;
}

.class:hover {
    background: red;
}

DEMO

This is not something that I've seen Illustrator be able to do and transfer it to Dreamweaver