html - Onhover change effect in css -

I created a box with image, link, title and some values. I want to make an effect on the mouse / hover.

Here I added the class to do this:

But this does not create the effect. What is wrong

This is a wrong way to do this

  .c1: hover {.item .morebtn {status:.? Relative; Font-size: 14px; Margin-right: 10px; Margin top: 32px;} .item .pillBtn {-webkit- border-radius: 5px 5px 5px 5px; Border-radius: 5px 5px 5px 5px; Background: # 7CDD97; Padding: 10.5px 40px 8.0px 40px; Color: #fff; Font-weight: bold; Font-size: 20px; Text-decoration: none;} .item h6 {margin top: 18px;} .item {background: # F3F3F3; Height: 70px; -webkit -border-radius: 5px 5px 5px 5px; Border-radius: 5px 5px 5px 5px;}}  

You nest with pure CSS Can not style You can do something like

your Pure CSS with a pre-processor like this:

  .item: hover .moreBtn {status: relative; Font-size: 14px; Margin-right: 10px; Margin-top: 32px; } .item: Hover. PillBtn {-bbkit-boundary-radius: 5px 5px 5px 5px; Range radius: 5px 5px 5px 5px; Background: # 7CDD97; Padding: 10.5px 40px 8.0px 40px; Color: #fff; font-weight: bold; Font-size: 20px; Text-decoration: None; } .item: hover {background: # F3F3F3; Height: 70px; -WebKit-boundary-radius: 5px 5px 5px 5px; Range radius: 5px 5px 5px 5px; }  

Unless the .item

.moreBtn and .pillBtn P>