overflow effect

  • gt8ost4l
  • Student
  • Student
  • User avatar
  • Posts: 99

Post 3+ Months Ago

can anybody tell me how to create an overflow effect like the arrow in yahoos main slide show how is this technique acheived
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

can u be more specific on which effect u want to recreate? I'm not sure exactly what u mean?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

@river rat: I think they mean the effects on the news bit.

@gt8ost4l: I think its just an image with an arrow with transparency held in an overflowing div.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I checked it out. Not 100% positive, but I don't think it's really an overflow issue. Using my webdeveloper toolbar, I outlined current elements on the yahoo page. When hovering over the said elements, it seems as it's a hover effect on a div.

The div is the same height as the top of the arrow point, but only has a plain white BG without a hover. When hovered over, the blue background with arrow shows up.

I did write a short tutorial on this, and actually use the effect on my new site I built, (don't want to put a link here because I don't want to seem like I'm spamming the forum).

Basically... create a div with a desired background. create an image that is double the width of the DIV. make the left half of the image what you want to see without a hover and the right half what u want to see when a hover is applied. Then just add a hover effect on the div where the image shifts left. I will look for my tutorial and post the link. or pm me to check out it's usage in effect.

EDIT:

html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html

There was a comment by righteous trespasser about just changing background color, but that's not what I'm trying to convey in the tutorial. There's a lot of neat effects that can be accomplished... even the yahoo "arrow".

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 47 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.