Add Image Overlay to Thumbnail — CSS Help!
-
I am trying to add an image overlay to the featured images on my blog’s home screen so that when guests hover over that image, text will appear that tells them to click the image in order to read the full blog post.
I have tried altering the CSS and tested it on a try-it editor with success, however, when I go to customize the CSS on WordPress, nothing changes… at all. It looks exactly the same as if I added no custom CSS.
I have been at this for days, watching tutorials, testing different codes, but still I cannot seem to make this change appear on my blog.
Any help or advice is greatly appreciated!
The blog I need help with is: (visible only to logged in users)
-
-
Hi, can you post the code you are trying to use here between code tags like this
<code> All the code here </code>and I’ll take a look at it.
-
Hi there! Thank you for your help.
The code is
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
}.image {
opacity: 1;
display: block;
width: 940;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}.container:hover .image {
opacity: 0.3;
}.container:hover .middle {
opacity: 1;
}.text {
background-color: #FFFFFF;
opacity: 0.5;
color: black;
font-size: 36px;
padding: 16px 32px;}
</style>
</head>
<body><div class="container">
<article id="post-25" class="post-25 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
<header class="entry-header">
<h1 class="entry-title screen-reader-text">Day 1 – Change of Plans</h1> <img width="940" height="656" src="https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=940" class="attachment-finder_large size-finder_large wp-post-image" alt="" srcset="https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=940 940w, https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=1880 1880w, https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=150 150w, https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=300 300w, https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=768 768w, https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=1024 1024w" sizes="(max-width: 940px) 100vw, 940px" data-attachment-id="52" data-permalink="https://wildly-unprepared.com/2017/07/30/day-1-change-of-plans/day-1-featured/" data-orig-file="https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg" data-orig-size="5527,3859" data-comments-opened="1" data-image-meta="{"aperture":"5.6","credit":"","camera":"NIKON D3300","caption":"","created_timestamp":"1501527223","copyright":"","focal_length":"18","iso":"200","shutter_speed":"0.001","title":"","orientation":"1"}" data-image-title="day 1 featured" data-image-description="" data-medium-file="https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=300" data-large-file=“https://wildlyunprepared.files.wordpress.com/2017/07/day-1-featured.jpg?w=940"><div class="middle">
<div class="text"><center><b> DAY 1
<small>CHANGE OF PLANS</small></br></b> </center></div>
</div>
</div></body> </html>
</header>
</article>I did speak with a wordpress representative and they informed me that this code does not work because some of the elements in the code do not exist in the site’s HTML.
That being said, I am hoping to achieve something to this effect on my site. As of right now, many people are confused and do not know to click the photos on my blog to lead to the full posting. I am hoping to modify my site so that when a guest hovers over the image, the title of the blog posting appears, for example, “Day 1- Change of Plans” and leads them to click it and be redirected to the full posting.
Thank you again for your help!
-
Hi, the code above is actually HTML, and is meant to work as a standalone web page and will not work inserted into a WordPress page or post.
Looking at the html generated for your main page, the site title and meta data information (category, date, etc.) do not exist for the posts on that page, and that is not something that we can add via CSS. It would require changes to the theme files themselves.
My first suggestion would be to look at some other themes that have the titles and/or meta data on the featured images. I can’t think of any right off hand that have full-sized featured images with the titles and such overlayed on the image, most are grid style layouts.
- The topic ‘Add Image Overlay to Thumbnail — CSS Help!’ is closed to new replies.
WordPress.com Forums 
