Rectangle 27 0

javascript jQuery Border Image (top left, top right, bottom left, bottom right)?


/* Default */
.layout-product .icon {
  display: none;
}

.layout-product:hover .icon {
  display: block; /* or inline-block or whatever you like that isn't none */
}
// I have used a toggle which means it applies for both .mouseenter and .mouseleave 
// which the .hover function alias. If you pass one function rather than two it will
// Use that function for both events. Customize as you like.
$('.layout-product').hover(function(e) { 

  $(this).find('.icon').fadeToggle();

});
<div class="layout-product">
  <a href="http://www.mysite.com/product/lorem-ipsum-1">
    <div class="product-image">
      <img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
      <span class="icon top-left"></span>
      <span class="icon top-right"></span>
      <span class="icon bottom-left"></span>
      <span class="icon bottom-right"></span>
    </div>
  </a>
</div>
background
border-image

@MitchellLayzell Is that using CSS border-image, background or html + css?

@MitchellLayzell Yeah, I think multiple background would be the way to go, but you might have to use Modernizr to provide a decent fallback, I read that on css-tricks.com/stacking-order-of-multiple-backgrounds. Good luck!

Also it goes without saying if you could avoid the use of empty elements in your html and use whichever css properties you can, either background of border-image as you mentioned, then that would be preferential, less DOM elements is better performance and maintainability, and purely presentational elements should be avoided where possible for semantics (separation of Presentation from Content).

Awesome thanks for the link and your time!

If you would like greater flexibility with your animation you could use Javascript instead of the CSS I provided.

Thanks for the advice, you're completely right it would just be a lot easier to just include them in the HTML, I was trying to stay away from that though because adding four elements to for each product to the DOM just for a hover effect seems a bit much, so I was thinking about just creating a transparent PNG with the border img on the corners and then just overlaying it on top ofthe product image what do you think about that? Thanks again!

That's with background I'm trying to figure of the simplest way to add and icon to each corner of the product image

You should try to re-use nodes before creating/removing them. The less JavaScript has to engage with the DOM the faster, and hance smoother your animation and the UX will be. Since you're not retrieving any dynamic information on the hover event you can just put the .icon elements into your initial html, with a display: none property. And either in CSS or using JS show/hide on hover. Also scripts block page load, so to an extent they impact performance, obviously depending on the length of your script.

Note