https://jesselau.com/en/tags/css/ Recent content in css on Hugo -- gohugo.io en Sun, 23 Sep 2018 21:16:08 +0000 https://jesselau.com/how-to-create-zoom-image-hover-effects-with-transparent-text-remove-adsense-auto-ads-from-homepage-in-extra-theme/ Sun, 23 Sep 2018 21:16:08 +0000 https://jesselau.com/how-to-create-zoom-image-hover-effects-with-transparent-text-remove-adsense-auto-ads-from-homepage-in-extra-theme/ After a day of renovation, I felt that the fullwidth slider on the front page didn't seem to be necessary, and it was not clear to say what my website was talking about. Using EXTRA's image module to add a picture is very simple, however, we can not add text on the image. So let's polish a dynamic effect with CSS. How to Create Zoom Image Hover Effects with Transparent Text Add a text module and write the code below <div class="zoomimg-container"> <img class="zoomimg" style="width: 100%;" src="https://jesselau.com/wp-content/uploads/2018/09/jesselaublog-1.jpg" /> <div class="zoomimg-content"> <h1>Welcome to Jesse Lau's Blog</h1> Website Programing, Internet Marketing, Forex Trading, Billiard, Darts And I Can Stand On One Leg For 30 Minutes With My Eyes Closed. ☺ </div> </div> Then add the following code to the CUSTOM CSS of EXTRA THEME OPTION: .zoomimg-container { position: relative; width: 100%;