I wish to overlay an icon in the bottom right corner of an image.
I’ve been trying to research online but can’t quite find anything that fits my exact scenario. I am using a wordpress blog and wish to add the overlay dependent on the tags used in a blog post (my theme already inserts the tags as CSS classes of the div containing each blog post). I hope to be able to have an icon on the blog entry without the need for creating a new blog post format. For example: a video game controller for a blog about games, a book for a big about books.
My issue has been finding some CSS which inserts the icon without declaring the overlaying image in the HTML as this controlled by my wordpress theme and I’d rather keep everything custom in my additional CSS area so I can upgrade my theme in the future.
Ideally my ultimate goal is to achieve some code which slightly shrinks the main image so the icon can also be placed over the corner to make it pop-out a little more. Hopefully the below images have make my idea a little more clear.
Any help would be appreciated, please let me know if I need to provide any more info.
I’ve added this to my site and the overly isn’t in the correct place and there are two of them. I guess I need a div with jus tthe img tag in? Currently, the only div i have contains the text preview to the blog aswell…
<article id="post-16" class="post-16 post type-post status-publish format-standard has-post-thumbnail hentry category-gamedemo tag-demo tag-first-go tag-galaxy-shooter tag-game tag-myfirstgame col-2" itemscope="" itemtype="http://schema.org/BlogPosting">
<header class="entry-header">
<div class="entry-meta">
<span class="posted-on">Posted on <a href="https://danhayman.co.uk/gamedemo/myfirstgame/" rel="bookmark"><time class="entry-date published" datetime="2018-03-01T08:28:43+00:00">March 1, 2018</time><time class="updated" datetime="2018-04-01T22:22:09+00:00">April 1, 2018</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://danhayman.co.uk/author/danhayman/">Dan Hayman</a></span></span> </div>
<h2 class="entry-title" itemprop="name headline"><a href="https://danhayman.co.uk/gamedemo/myfirstgame/" rel="bookmark">myFirstGame</a></h2> </header><!-- .entry-header -->
<aside class="entry-meta">
<span class="comments-link"><a href="https://danhayman.co.uk/gamedemo/myfirstgame/#respond">Leave a comment</a></span>
</aside>
<div class="entry-content" itemprop="articleBody">
<img width="1140" height="1140" src="https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-1140x1140.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="myFirstGame" itemprop="image" srcset="https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-1140x1140.png 1140w, https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-150x150.png 150w, https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-300x300.png 300w, https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-768x768.png 768w, https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1-1024x1024.png 1024w, https://danhayman.co.uk/wp-content/uploads/2018/04/MainMenuIcon-1.png 1200w" sizes="(max-width: 1140px) 100vw, 1140px" /> <p>Here is my first game. I developed it using a course purchased from Udemy.com in Unity. I’ve added a couple of extra features in addition to the course content: Camera shake High Score Audio mute button Try it out! Go for the high score! Up = W Down = D Left = A Right =<br /><a href="https://danhayman.co.uk/gamedemo/myfirstgame/" class="more-link">Continue reading <span class="screen-reader-text">myFirstGame</span> </a></p>
</div><!-- .entry-content -->
</article>
I’ve managed to edit my wordpress theme to add a div around all post thumbnails so now have the CSS working!
I’m goign to try and work out why the the controller image is larger than the pen image and also look at why on my ipad the icons cover the preview text. On my mobile it wokrs perfect!
If one can take your statement as accurate, please be aware that modifying the original WP theme files is not a “best practice”. Instead, one should override or modify the orginal code using a “child theme” as it is known to Wordpressers or a “local stylesheet” to the rest of us. The reason is that Wordpress code is carefully orchestrated. Should the original Wordpress theme files be updated, your web site could fail. It might “fail” in some ways anyway, depending on your overrides, but the errors would be harder to isolate and fix if you made changes to the original theme files rather than to a “child theme” file.
The page to which we are privileged contains no validation errors (thats a BIG plus!)… but it contains a few “practices” that are outdated or otherwise poor. Offhand, it looks like an older XHTML site that you are somewhat haphazardly converting to HTML(5). The obvious “tells” are the unnecessary verbiage shown in the validator - ie: the unnecessary uses of the “type” attribute and other attributes in a couple of dozen places - and the trailing slashes on empty elements. Not deal breakers, just “tells” indicating an incompletely updated site - things that could be quickly and easily updated - “prioritized”, perhaps.
There is one styling practice (error) on that page that is cringeworthy, no matter how you cut it.
There should not be that many uses of the !important modifier throughout a major web site. Those modifications should be applied at the end of a local stylesheet with proper attention to specificity, not with a sledge hammer near the beginning of the “theme” sheets. The code that is written is guaranteed to make life (and further coding) very difficult. One should always consider the !important modifier a tool of last resort not to be used indescriminately.
Firstly, thanks for investing time into my questions and site, it’s appreciated.
I seen a lot of comments about making a child theme, I made backups of the php file I have edited so I’ll look into making a child theme. I don’t think the theme is updated anymore, its just one I found online which I guess explains some of the old practices you’ve mentioned. Here’s a before and after of the php I updated, I think it should be alright
I quite like the theme, do you think it is worth spending time into updating to html5? Will there be a point in time, if i leave the site as is, it will fail to render correctly?
Lastly, I dont think i use the emojis so far in the site so once I’ve made a child theme i think I’ll just remove those references.
Cheers
Dan
PS.One last question, when referencing an image (for example: the icons I have added to my site) is there a performance benefit to using a relative path rather than an an abolute http URL?
That’s a rather circumstantial decision. If it were me, I wouldn’t hesitate to update the code in a site that I really liked so it will be around and functional for the forseeable future. That’s easy for me to say because I would have the interest and would enjoy doing so. I don’t think it would take too long.
IMO, don’t believe that your site will completely fail anytime soon if left as is, but I would seek the opinion of an experienced Wordpress person which I am not.
In most cases, using a relative path to a locally hosted resource is more efficient than using a full URL to that same resource, at least initially. Because of efficient caching and URL handling, I am not sure if the difference is significant nowadays.
It is far more significant to minimize the number of links to off site resources used in your site whether they are stylesheets or images, etc. Network delays that may occur when your site attempts to connect to those remote resources can severely hamper the speed of your web site.
Hope that helps.
Just for fun, here’s yet another way of positioning the icon in the lower right corner of the image box. Download the zip file. It unpacks to a working page. Open it in your browser. It’s probably useless since it assumes that there will be only one large image used.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/overlay-png-over-image/293130
djhayman02
Apr 2,2018 1:16 AM
-->
<style>
/*
html {
box-sizing:border-box;
}
*,*::before,*::after {
box-sizing:inherit;
}
*/
.galaxyshooter {
max-width:600px; /* max width of the outer box, .galaxyshooter */
position:relative;
outline:1px dashed red; /* TEST Outline. To be DELETED or Commented Out */
}
.galaxyshooter::before,
.galaxyshooter::after { /* properties common to ::before and ::after pseudo-elements */
content:"";
display:block;
background-repeat:no-repeat;
background-size:contain;
padding-top:100%; /* height of outer box (relative to width of .galaxyshooter, 600px; includes bottom overshoot white space for icon) */
}
.galaxyshooter::before {
background-image:url(images/galaxyshooter.jpg); /* 1024x1024 */
margin-right:5%; /* white space to right of background image (relative to width of outer box, 600px; right overshoot space for icon) */
}
.galaxyshooter::after {
width:25%; /* width of icon box (relative to width of .galaxyshooter, 600px) */
background-image:url(images/galaxyicon.png); /* 272x272 */
background-position:0 100%; /* or {background-position-y:bottom} */
position:absolute;
bottom:0;
right:0;
outline:1px dashed lime; /* TEST Outline. To be DELETED or Commented Out */
}
</style>
</head>
<body>
<div class="galaxyshooter"></div>
</body>
</html>
I have another version, similar to SamA74’s that accepts different foreground images.
I’m a bit lost. You seem to have changed your wish.
Could you please post a screenshot showing how the icon covers the text?
Showing your code in a “working page” that demonstrates the problem would be ideal, or post a link to your test site.
Sorry for my slow response, I had a long weekend holiday watching motorsport! I hope you had a nice weekend?
You can see the icons covering the text at http://danhayman.co.uk The icons covers the blog post image thumbnail perfectly. Is it possible for the text to move down below the red outline?
Working on it, but I would like to clarify a couple of items.
Please verify whether you want the icon image at the top left or bottom right of the larger article image. Images posted plus your comments have suggested both.
Please verify that you are willing to modify the HTML for the articles if it isn’t too drastic. I expect to add a box or two.
I see from your site code, that there is more than one icon image. How many different icon images are there? Do you want them to be foreground images (ones that you can paste in the HTML), or background images (CSS dependent, but can be set by choosing an appropriate classname.) You will be maintaining the site (I’m looking at the home page) so the icon selection choices (foreground-image or classname selection) are your choice. Normally, images for decoration purposes are background-images, but if these articles change frequently then it might be easier for you to maintain if they are located in the foreground. Personally, I would recommend that the icons be background images that are selected by a classname in the HTML but you will need to be able to modify the CSS to add another icon. Depends on your skill level.
It also looks like the article images are different shapes (they are not all square). That is not a problem.
Try to give me some feedback about the info that I’ve requested and any other operational details that you believe an engineer might want to know in order to correcty build a web page to your specifications (put yourself in the shoes of the helper-bees here ).
Hi,
I don’t mean to interrupt any solutions that ronpat may be working on.
If the overlay icons will always be at the bottom it seems like the obvious solution is to target the first <p> tag that follows and add some top margin.
As seen below using the adjacent sibling selector…
.djh-post-image + p {
margin: 2rem 0 1.5rem;
}
Or to target that p tag only when you know that you have a bottom icon you could set up a new class for the p tag.
).