How to make this text grow when an image is hovered over?

Question

I want .thumb_text to grow when li.thumb_list <img> is hovered over. Currently, I can only get it to scale when I hover over the text, but not the <img> .

Also, for some reason the text is boldening no matter what weight or font family I give it.

 li.thumb_list img { -webkit-transform: scale(1.3); transform: scale(1.3); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } li.thumb_list:hover img { -webkit-transform: scale(1); transform: scale(1); } h1.thumb_text { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } h1.thumb_text:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .photo_thumbnails { display: inline-block; width: 1300px; height: 235px; overflow: hidden; position: relative; } .thumbnail_container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } li.thumb_list { display: inline-block; overflow: hidden; height: auto; margin: auto; text-align: center; position: relative; } h1.thumb_text { position: absolute; margin: auto; top: 0; left: 0px; right: 0px; bottom: 0; color: #FFF; height: 50px; width: 200px; z-index: 999; vertical-align: middle; text-align: center; font-family: 'anonymous pro', monospace; font-size: 20px; font-weight: 100; } 

 <div class="thumbnail_container"> <div class="photo_thumbnails"> <ul> <li class="thumb_list"> <a href="http://scottnorris.co.uk/photos/uk.html"><img src="Photos/Thumbnails/UK.jpg" width="300" height="225"> <h1 class="thumb_text">uk landscapes</h1> </a> </li> <li class="thumb_list"> <a href="http://scottnorris.co.uk/photos/asia.html"><img src="Photos/Thumbnails/Asia.jpg" width="300" height="225"> <h1 class="thumb_text">asian landscapes</h1> </a> </li> <li class="thumb_list"> <a href="http://scottnorris.co.uk/photos/forgotten.html"><img src="Photos/Thumbnails/Lost.jpg" width="300" height="225"> <h1 class="thumb_text">lost &amp; forgotten</h1> </a> </li> <li class="thumb_list"> <a href="http://scottnorris.co.uk/photos/in-nature.html"><img src="Photos/Thumbnails/In_Nature.jpg" width="300" height="225"> <h1 class="thumb_text">in nature</h1> </a> <li> </ul> </div> </div> 

Answer 1

If you only want the text to increase while hovering img you can use the CSS sibling selector like this:

.thumb_list img:hover + .thump_text{
font-size:50px;
}

Note that if you Hover the text with only this CSS it will decrease again, given that you've only chosen the Hover effect for the img.

To get around this you have (at least) two choices: set the Hover effect to the container instead (no need for sibling selector then) or add pointer-events: none to the .thump_text

With regard to your font being only bold, I guess it could be because you only have one font-weight available with your custom font. Usually you have to provide the browser with different files for each weight of font. On the other hand though, the browser usually tries to create its own weight, when either of the extremes is applied (100 or bold/700). This is just a guess though, but could be a possible reason.