Jump to content
Sign in to follow this  
danielfinn

CSS help: Inner border on mouse rollover

Recommended Posts

danielfinn

I would like to use pagelines customize so that an make it so that a border appear inside of an image on mouse rollover. So far I have created an image whereby the mouse rollover causes it to display different pixel dimensions. I would like to incorporate a border into this. Could someone help me do this? The code I have devised is shown below. It involved create a rule and then referencing it in the html section of the page within the dashboard. CSS

#lauren-album-artwork-thumb
	{
	    display: block;
	    width: 206px;
	    height: 185px;
	    background: url("http://localhost:8888/wp-content/uploads/2012/06/lauren_small.jpg") no-repeat 0 0;
	}
	
	#lauren-album-artwork-thumb:hover
	{
	    background-position: 0 -185px;
	    border: 15px solid #303030;
	   -webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	    border-radius: 10px;
	}
HTML to reference
[/code]

I have tried several different examples I found on the web to include an inner border but I have no luck.

Share this post


Link to post
Share on other sites
Rob
Unfortunately, this is a customization that is outside the scope of forum support going to site design. I'm going to refer you to http://www.pagelines.com/pros to seek assistance from one of our professional web developers.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Henry Perkins
[code]#lauren-album-artwork-thumb a:hover img { margin-top: -3px; margin-right: -3px; margin-bottom: -3px; margin-left: -3px; border: medium none; float: left; overflow: hidden; }[/code] The above is very basic CSS code to accomplish inner image borders on hover. Any luck with that?

Share this post


Link to post
Share on other sites
danielfinn
I will check out the pagelines pro section. I tried that code, however, unfortunately it did not work for me. I just added it to the end of the code I posted above. It just reduced the size of the image, but got rid of the 15pz border I outlined in the second hover selector section. I also tried replacing the '-3' part in your suggested code with -15 and the same thing happened, however, the image reduced even further.

Share this post


Link to post
Share on other sites
catrina
I think because the border is intended to only go outside (considering that it is made to function as a border), it can never go inside (I think it's a limit in CSS and not much else can be done about it). The only other way I can of think to make it appear inside is by creating a copy of the image, adding the border inside of it, and then using its direct image URL in HTML that allows a the non-bordered image to change on rollover. That is a pretty long way of accomplishing what you're looking for, though.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×