2

I am creating a staff page for a project, and I am putting an image (suing views) that links to the staff members page. What I thought would be really cool is if when you scrolled your mouse over the image it turned into the name of the person. I am not sure at all how to do this, and after several hours of searching I need some help.

Thanks in advance.

  • plz expand details. – monymirza Feb 8 '13 at 5:08
2

You can do a simple thing like this:

HTML

<a class="person" href="#">
   <img src="" width="100" height="100">
   <span>John Doe</span>
</a>

CSS

a.person {
    border: 1px solid #ddd;
    display: block;
    height: 100px;
    overflow: hidden;
    width: 100px;
}
a.person:hover img {
    display: none;
}
a.person span {
    display: block;
    text-align: center;
    margin: 20% 0 0;
}

Fiddle: http://jsfiddle.net/fXnmr/

If you want fade effects etc you need to go the Javascript/jQuery route.

1

If you're using views I'd overwrite the image field with the code by enzipher but use tokens for the staff names so it's pulled from a 'Staff Name' field. Then use CSS and JS to do the rest of the fancy stuff.

So...

Edit your content type to add 'Staff Name' and 'Staff Image' Create a view of fields Add 'Staff Name' and 'Staff Image' Don't display Staff Name and put it above the image in the order Rewrite Results the Staff Image using the code above and replacement patterns for the staff name and image.

If you want to link this to content don't click "Link to Content" or anything like that. Add the NID field to the mix above, exclude from display then write that into the link.

Or something along those lines.

Hope that helps, i've just done battle with a similar thing that looks like the pic attached...

Good luck!!

preview

0

You could do the following.

Add the name as well as the image in the view.

Using css initially place the name below the image covering it completely.

Now again using css write a hover on image and set the display to none so that it would hide and the name would show up.

If you want some kind of animation effects the you would go with JS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.