How to make that when you hover on the picture, this hexagonal blue frame appears?

enter image description here

  • in the picture you have not a regular hexagon, but with curved edges. as an option, substitute when hovering a picture with a frame with the desired color or paint it - lexxl
  • There is a site http://csshexagon.com . All draw for you) - Leonid Shishkin

3 answers 3

There are plenty of options. So :

  1. Create a picture with a frame and a picture without. When hovering, replace the picture ( Pros - simple code. Minuses - not convenient when many pictures ).
  2. Implementation through transform: scale(N) . ( Pros - works for everything. Minuses - with an increase, the curvature and irregularity of the form are visible ). Fiddly: here and here .
  3. The implementation of the usual frame. Undoubtedly, the easiest, of the same type, and without any problems the way) ( Pros - fast, simple implementation. Minuses - Again, with an increase, the constituent elements will be visible for a while ). Fiddle is here .
  4. Svg Very good way, but perhaps in this situation it will be unnecessary to use it here. ( Pros - cross-browser compatibility, any tasks, with the zoom will remain the same image. Minuses - no ). The documentation is here (Mozilla) , here (Habrahabr) and right here (English here, you can translate as needed). Example for SVG (CodePen) .

 body { font-family: "PT Sans", "Arial", sans-serif; } .hex { cursor: pointer; fill-opacity: 0.4; stroke: #000; stroke-width: 1; } .hex:hover { fill-opacity: 1; stroke: #ff0000; stroke-width: 5; } .hex { transition: transform, fill-opacity, stroke-width; -webkit-transition: transform, fill-opacity, stroke-width; transition-duration: 1s; -webkit-transition-duration: 1s; } 
 <h1>Image Fill</h1> <svg id="image-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <pattern id="image-bg" x="0" y="0" height="300" width="300" patternUnits="userSpaceOnUse"> <image width="300" height="300" xlink:href="http://placekitten.com/306/306"/> </pattern> </defs> <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="url('#image-bg')"/> </svg>

  1. Finally the 5th and last method. Clip-Path . It is also one of the properties of SVG , but, nevertheless, it is a separate component of this picture. ( A huge plus is that you can easily cut out any shape from a picture. Minus is a rather painstaking job, not all browsers support this property. ). The documentation is here (in English) , examples are here , and Fiddle is here .

And a similar question: link .

  • And why SVG do not recommend, can you elaborate? - Arthur
  • @Arthur, I rather did not quite correctly put it: I meant that in this situation I would use Clip-Path instead of pure SVG , since the latter seems too cumbersome to me. I'll correct the answer now. - Niklex
  • SVG would be appropriate, as it is much more cross-browser than the clip-path property. - Arthur
  • You are right, did not know about it. Now I will change it again. - Niklex
  • Catch a plus :) If you are interested in SVG - you can join here chat.stackexchange.com/rooms/70612/svg-chat - Arthur

In English. hexagon will be hexagon . If you search by this name, you can get something like this:

 body { background: #fff } .rhex { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; opacity: .25; background: orange; transition: opacity .5s; cursor: pointer; } .rhex:before, .rhex:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; } .rhex:before { transform: rotate(60deg); } .rhex:after { transform: rotate(-60deg); } .rhex:hover { opacity: 1; } 
 <div class='rhex'></div>

  • one
    An interesting option. But pseudo-elements have 100% dimensions, and not inherit (otherwise, it will not be rubber-made). And yet, the border from this is not very possible to get. - Qwertiy ♦

I suggest using border-image .

The hexagonal background should occupy the entire area of ​​the block along with the borders, and through the border-image hexagonal frame is laid over it (the rest is transparent).

For IE, you will have to add border-color: transparent .