Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Partial "X" shape over image on hover

I need a sort of X shape over an image on hover. But not the whole "X", just the outer bits. This is the image from my designer:

partial X shape over image

I've got a nice "X" shape on hover here:

#xdiv {
  width: 200px;
  height: 200px;
  border: 1px solid #999;
  background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
  cursor: pointer;
  opacity: .4;
}
#xdiv:hover .xdiv1 {
  height: 200px;
  width: 1px;
  margin-left: 100px;
  background-color: #333;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1;
}
#xdiv:hover .xdiv2 {
  height: 200px;
  width: 1px;
  background-color: #333;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 2;
}
<div id="xdiv">
  <div class="xdiv1">
    <div class="xdiv2"></div>
  </div>
</div>

That I modified from this answer.

Going by my designer's example, is this possible using CSS and not using another image on hover?

like image 374
Jeannie Avatar asked Dec 03 '22 17:12

Jeannie


2 Answers

EDIT:

You can achieve the partial X shape with:

  • 2 pseudo elements instead of divs to reduce markup
  • top/bottom borders and no background so the middle part of the shape is transparent

DEMO

NOTE : you should also declare non prefixed properties after the prefixed ones (transforms in your snippet)

#xdiv {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #999;
  background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
  cursor: pointer;
  opacity: .4;
}
#xdiv:before, #xdiv:after {
  content: '';
  position: absolute;
  display: none;
  left: 50%; top: 0;
  width: 1px; height: 100px;
  border-top: 50px solid #333;
  border-bottom: 50px solid #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#xdiv:hover:before {
  display: block;
}
#xdiv:hover:after {
  display: block;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
<div id="xdiv"></div>

Previous answer :

DEMO

#xdiv {
    width: 200px;
    height: 200px;
    border: 1px solid #999;
    background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
    cursor: pointer;
    opacity: .4;
}
#xdiv:hover .xdiv1 {
    height: 100px;
    width: 1px;
    margin-left: 100px;
    border-top: 50px solid #333;
    border-bottom: 50px solid #333;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    z-index: 1;
}
#xdiv:hover .xdiv2 {
    position:relative;
    top:-50px;
    height: 100px;
    width: 1px;
    border-top: 50px solid #333;
    border-bottom: 50px solid #333;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    z-index: 2;
}
<div id="xdiv" >
<div class="xdiv1">
    <div class="xdiv2"></div>
</div>
</div>
like image 177
web-tiki Avatar answered Dec 21 '22 09:12

web-tiki


Approach using Gradients:

  1. Using a div and background color, I've created the square div
+-------------+
|             |
|             |
|             |
|             |
|             |
|             |
|             |
+-------------+
  1. Then, using a pseudo element rotated 45 degrees, and another at -45 degrees, You could generate the 'X' shape (currently setting a solid background color for help with positioning):
+-------------+
|\           /|
|  \       /  |
|    \   /    |
|      \      |
|     /  \    |
|   /      \  |
| /          \|
+-------------+
  1. Now, rather than using a solid black colour, you could use a gradient background, with 'color stops' to make the center transparent. (note: for gradients, I would recommend this generator )

  2. This leaves something like:

+-------------+
|\           /|
|  \       /  |
|             |
|             |
|             |
|   /      \  |
| /          \|
+-------------+

depending on your positioning of the color stops.

DEMO

div {
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/300);
  position: relative;
  transform-origin: center center;
  overflow: hidden;
}
div:before {
  content: "";
  position: absolute;
  top: -50%;
  left: calc(50% - 1px);
  height: 200%;
  width: 2px;
  transform: rotate(45deg);
}
div:after {
  content: "";
  position: absolute;
  top: -50%;
  left: calc(50% - 1px);
  height: 200%;
  width: 2px;
  transform: rotate(-45deg);
}
div:hover:before, div:hover:after{
 background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 31%, rgba(0,0,0,0) 69%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */


  
<div></div>
like image 31
jbutler483 Avatar answered Dec 21 '22 09:12

jbutler483