danielfinn 1 Report post Posted June 20, 2012 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 547 Report post Posted June 20, 2012 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 14 Report post Posted June 20, 2012 [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? @henry_rly Share this post Link to post Share on other sites
danielfinn 1 Report post Posted June 20, 2012 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 103 Report post Posted June 21, 2012 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