CODEWITHSUNDEEP
csshoverhtml-lists
Krystian
Krystian

Reputation: 987

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>

Upvotes: 0

Views: 208

Answers (1)

Sankar
Sankar

Reputation: 7107

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...

Upvotes: 1

Related Questions