CSS help: Inner border on mouse rollover

[danielfinn 1]

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.

[Rob 547]

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.

[Henry Perkins 14]

[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?

[danielfinn 1]

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.

[catrina 103]

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.