I'm trying to do something that's probably quite simple, but I can't get my head around it.
I'm trying to overlay a transparent PNG with a fade over the top of another image using CSS if that's at all possible. I'm trying to achieve this result, but utilizing two images, the actual image and then the PNG overlay which creates the fade.
What I'd Like to Achieve
It's on a WordPress website utilizing the featured image system, so I'd like to make it simple for our editors who will be able to simply upload the featured image and have the fade overlay automatically, no need to edit the image etc or create a PNG with the fade already as that'll be a lot of image editing work. Trying to simplify the process.
The website for a look at the code
Any help with this would be amazing! Thank you in advance!
You can use the absolute position property to set the two images on top of each other. To have greater control over the filtering image, you can use the filter property and set the opacity you would like it at. This snippet shows three examples: One where the filtering image is set to 70%, one at 50%, and the other at 0%.
.ref {
position: relative;
height: 200px;
margin-bottom: 10px;
}
.imgMain {
position: absolute;
top: 0px;
left: 0px;
}
.imgFilter {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(70%);
}
.imgFilter2 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(50%);
}
.imgFilter3 {
position: absolute;
top: 0px;
left: 0px;
filter: opacity(0%);
}
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter2" src="https://picsum.photos/200?image=1022" />
</div>
<div class="ref">
<img class="imgMain" src="https://picsum.photos/200?image=985" />
<img class="imgFilter3" src="https://picsum.photos/200?image=1022" />
</div>
Related
So we're a group of three that have our first assignment in IT. We're supposed to make a simple game or just a website with some basic HTML and CSS (no JS), preferably with animations. We have decided to make a game where your cursor is Homer Simpson, and he's trying to eat the donuts in the kitchen.
The basis for this is a background image of the kitchen room, some donut images and the image for the mouse cursor. The donuts are multiple PNGs with the same screen-size as the background-image.
So far we've managed to create a working cursor, background-image and placing the donuts. Our problem though, is that we can't figure out how to make the donuts invisible when clicked upon.
Below is the code from both our HTML and CSS documents.
body {
height: 100vh;
cursor: url('../images/homer2.png'), auto;
}
body:active {
height: 100vh;
cursor: url('../images/homer-eat2.png'), auto;
}
.kitchen {
position: relative;
top: 0;
left: 0;
}
.donut1{
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.donut1:active{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.donut2{
position: absolute;
top: 0;
left: 0;
}
.donut3{
position: absolute;
top: 0;
left: 0;
}
.donut4{
position: absolute;
top: 0;
left: 0;
}
.donut5{
position: absolute;
top: 0;
left: 0;
}
.images {
position: relative;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div images>
<img src="../images/background-page2-new.png" class="kitchen" draggable="false" usemap="#img-map">>
<img src="../images/donut-1.png" class="donut1" draggable="false">
<img src="../images/donut-2.png" class="donut2" draggable="false">
<img src="../images/donut-3.png" class="donut3" draggable="false">
<img src="../images/donut-4.png" class="donut4" draggable="false">
<img src="../images/donut-5.png" class="donut5" draggable="false">
</div>
</body>
</html>
So far we've only tried to make donut1 disappear, as we found it a bit pointless to copy paste that code before it actually works. Donut1 is the one at the table.
Below are some images of it for reference:
https://i.imgur.com/aWFRewj.png
https://i.imgur.com/mDQYi1u.png
you can achieve the result you want with the help of radio buttons.
its a nice and clean trick to hide something only with HMTL, CSS. (no JS)
Here I have setup a small example for you.
Follow this in your game, Put your Donut image in label and hide it when related input checked using CSS as I did, try to run this snippet and then click on d1, d2 text.
Note: if you want to re-appear your Image on click again, use Checkbox instead of radio.
input {display: none;}
input:checked + label {
display: none;
}
<section>
<div>
<input type="radio" id="donut1">
<label for="donut1">Donut 1</label>
</div>
<div>
<input type="radio" id="donut2">
<label for="donut2">Donut 2</label>
</div>
<div>
<input type="radio" id="donut3">
<label for="donut3">Donut 3</label>
</div>
<div>
<input type="radio" id="donut4">
<label for="donut4">Donut 4</label>
</div>
</section>
I'm quite new with HTML and CSS so this might be quite a rookie question, or I may have some messy code. Below is the HTML for a div of my webpage's front page;
<div id="header" class="hero container mainfrontimage">
<h3>WEBSITE TITLE </h3>
<img src="../images/Logo.png" id="headerimg">
<div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> SHOP</div>
</div>
and the CSS..
#header {
background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat;
background-size: 100%;
border-top: 4px ridge #E0CC95;
border-bottom: 4px ridge #E0CC95;
opacity: 0.75;
}
Essentially the header ID fills the div with my background image exactly as I'd like it, with the right opaqueness and styles. But, because the title, logo and buttons in the HTML are all included in this, they also become less opaque. I was wondering if there's some way of making just the image opaque with the borders etc. and have the text not be affected- like an exception.
I've tried putting the title, logo and buttons into a separate div but because the image itself is in the CSS it means the original div with id="header" is empty.. which wouldn't make a lot of sense and doesn't work either.
Sorry if this is a huge mess, I'm really new to this. If anyone somehow figures out what I'm asking and can provide a solution I'd really appreciate it!
Don't apply background image directly to the div, if you want to control only the opacity background image, and not of the content. Instead, use a pseudo element like below.
<div id="header" class="hero container mainfrontimage">
<h3>WEBSITE TITLE </h3>
<img src="../images/Logo.png" id="headerimg">
<div class="buttons"><a class="btn btn-alt" href="../3 Join us/joinus.html">JOIN US</a> SHOP</div>
</div>
#header {
position: relative;
border-top: 4px ridge #E0CC95;
border-bottom: 4px ridge #E0CC95;
}
#header::after {
content: "";
background: url('../images/WEBSITE TITLE pics/placeholder2.jpg') no-repeat;
background-size: 100%;
opacity: 0.75;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
What iam trying to do is to put a with two imagebuttons over another which is used only for the backround-color.
For example:
How can i put the div with the two buttons over the backround exact like in the attached image.
My Code so far:
CSS:
.behind
{
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
}
HTML:
<div>
<div class="behind">
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
</div>
With my Code is looks like:
Your images are wrapped in the behind div, so they start at the same point your background does. First, move them out:
<div>
<div class="behind"></div>
<asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
CssClass="checkinButton" />
<asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
CssClass="checkoutButton divider" />
</div>
Secondly, update the .behind css to start at an absolute position (i.e. not from the top). Notice the position: absolute and the top: 20px elements. Just replace 20px with a value suitable for you, depending on the size of the images.
.behind {
background-color: #e2e0de;
width: 100%;
height: 130px;
z-index: -1;
position: absolute;
top: 20px;
}
Here is a working fiddle, but I've used other images so the value for the top: offset is different.
try this it might help (UNTESTED) :
.checkoutButton
{
position:relative;
top:-value;
z-index: 10;
}
PS : change the value to a a real value for exemple if your buttons height was 136px then give it -3px -> ((buttons height-divs height)/2).
i hope it helps and sorry for not testing it i can't at the moment
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.