Krystian Manthey Krystian Manthey - 4 months ago 9
CSS Question

li mouseover/ hover text block

I am trying to get a responsive mouseover like this, but unfortunately it creates a big box. Whats wrong here? The puzzle should also be centered, I also dont know how. Tried so much -.-

enter image description here



#mouseover1:hover:after {
content: "mehr erfahren!";
position: absolute;
top: 0; bottom: 0;
left: 50px; right: 0;
color: white;
font-size: 100%;
font-weight: bold;
line-height: 110%;
background: RGBA(0, 51, 204, .5);
border: 1px solid blue;
display:flex;
align-items: center; /* Vertical center alignment */
text-align: center;
justify-content: center;
}

<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');">
<li id="mouseover1">Test 1</li>
<li id="mouseover2">Test 2</li>
<li id="mouseover3">Test 3</li>
</ul>




Answer

Try this

#mouseover1:hover:after {
    content: "mehr erfahren!";
    position: absolute;
    top: 0; bottom: 0;
    left: 120px; right: 0;
    color: white;
    width:40%;
  height:35%;
    font-size: 100%;
    font-weight: bold;
    line-height: 110%;
    background: RGBA(0, 51, 204, .5);
    border: 1px solid blue;
    display:flex;
    align-items: center; /* Vertical center alignment */
    text-align: center;
   justify-content: center;
}
#mouseover1:hover:before {
  content:"";
  width: 0;
  height: 0;
  position:absolute;
  left:80px;
  top:5px;
  border-top: 25px solid transparent;
  border-right: 40px solid RGBA(0, 51, 204, .5);
  border-bottom: 25px solid transparent;
  }
<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');">
  <li id="mouseover1">Test 1</li>
  <li id="mouseover2">Test 2</li>
  <li id="mouseover3">Test 3</li>
</ul>

Hope this helps...