How to make base shape CSS hover effect?

Question

According to web design I should make the css hover effect.

Currently I'm done doing the CSS shape for hover effect, however I don't really know how to implement this into hover effect.

Should I use JavaScript for that or might be there are other ways to achieve this? Please, help me this, I'm really stuck with this. For better understanding, the final version should look like this in the picture below:

Here is an example of CSS shape, that I need to implement as a hover effect.

 #base { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } #base:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div id="base"></div> 

To this HTML code I need to implement hover effect =>

<div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
  <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
  <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
  <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
  <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
  <div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>

Answer 1

You just need to change background-color on hover and show triangle using pseudoelement. Demo:

 .left-menu { width: 250px; } .left-menu-item { position: relative; /* height to fit triangle to the right */ height: 66px; /* styles for centering text */ display: flex; /* center vertically */ align-items: center; /* center horizontally */ justify-content: center; /* just styles for demo */ background-color: #066d30; color: #fff; font-weight: bold; } /* change background-color on hover */ .left-menu-item:hover { background-color: #1d8631; } /* show triangle on hover */ .left-menu-item:hover:after { content: ""; position: absolute; left: 100%; top: 0; border-left: 33px solid #1d8631; border-top: 33px solid transparent; border-bottom: 33px solid transparent; } 

 <div class="left-menu"> <div class="left-menu-item">Ottogi</div> <div class="left-menu-item">Sayou Hapyo</div> <div class="left-menu-item">Natura Bogata</div> <div class="left-menu-item">TOO Many</div> </div> 

Answer 2

You've done most of the work already. You just need to change the CSS selectors #base and #base:before to .shadow-effect:hover and .shadow-effect:hover:before . This means that now the effect will be applied to your .shadow-effect div's when user hovers on them.

Also, since you have given some height, width and margin to the hover design, I added them to the .shadow-effect as well. So when you need to modify them, change them in both classes. Else, ideally saying, you should remove those styles from .shadow-effect:hover styles.

 .shadow-effect { height: 66px; margin-top: 20px; margin-right: 55px; width: 500px; } .shadow-effect:hover { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> <div class="shadow-effect"><p class="may">ООО Май</p></div> </div> 

Answer 3

Just removed left border in the before , than add it again in hover plus added an box shadow so it would look like the exemple

 .shadow-effect { display: inline-block; height: 66px; position: relative; width: 500px; text-align:center; } p{ line-height:2em; color:#fff; } .container{ padding-top:10px; background-color:#055f2a; width: 500px; } .shadow-effect:hover{ -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); background: #0a863d; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; } .shadow-effect:before { border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12 container"> <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> <div class="shadow-effect"><p class="may">ООО Май</p></div> </div> 

You can achieve that only with css, check this out