I need an image overlay for the html I have set up. Below is my code for the "change a profile photo" upload area.
-icon_camera_128.png is the image that needs to be the hover effect.
-img class="cameraUpoad is the default profile photo.
Can someone help me out?
Thanks
<label for="fileUploadLink" class="custom-file-upload">
<div class="changeProfile">
<img src="../img/elements/icon_camera_128.png">
<img class="cameraUpload" style="width: 128px; height: 128px;" src="data:image/png;base64, <?= preg_replace("/\"/", "\\\"", base64_encode($user['avatar'])) ?>" alt="avatar">
<input id="fileUploadLink" type="file" class="filestyle" name="imageUpload" />
You can give a wrap of the images a position: relative; and and the two images (regular state and hovered state) position: absolute; while adjusting opacity of the hovered image:
JS Fiddle
Something like:
.changeProfile {
position: relative;
}
img {
position: absolute;
height: 300px;
width: 300px;
}
.cameraUpload {
opacity: 0;
transition: .4s;
z-index: 999;
}
.cameraUpload:hover {
opacity: 1;
}
Related
I have three styles, the first two is for div, the last one is for the image. The image can be clicked without the div. But I need the div effect, how could I solve this issue. Now the image doesn't reponse to onClick.
const onclick=(e)=>{
e.stopPropagation();
console.log('clicked')
}
.start-screen {
position: absolute;
top: 0;
margin-top: 2.3%;
height: 65vh;
width: 91vw;
background: -webkit-linear-gradient(
top,
#0a0a0a 0,
rgba(10, 10, 10, 0.58) 58%
);
display: flex;
justify-content: center;
align-items: center;
}
#start {
transition-duration: 2s;
pointer-events: none;
}
.schema{
position: absolute;
top: 5%;
left: 35%;
display: block;
pointer-events: auto;
transition-duration: 2s;
}
<div class="start-screen" id="start">
<img class="transport" src='imgs/transportDiagram.png' alt='fail to load services' onClick="onclick">
</div>
You should add the click event in the div.
<div className="start-screen" id="start" onClick={onclick}>
<img className="transport" src='imgs/transportDiagram.png' alt='fail to load services' />
</div>
I made a mistake that didn't use the right class name. Change className='transport' to 'schema' would work.
Hopefully this will work
<div className="start-screen" id="start">
<img className="transport" src='imgs/transportDiagram.png' alt='fail to load services' onClick={() => onclick()} />
</div>
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 went through a number of questions regarding displaying image on hover here on Stackoverflow, but couldn't find a solution for my problem.
Right now I managed to display an image in the background of the paragraph once I hover on it. See on JSFiddle.
Ideally what would I like to do achieve: once I hover over an Example1 inside of a paragraph I would like to display Image1 in the background, not below the paragraph, but centered in the background, below all of the elements. As pictured here.
Hovering on Example2 would ideally display Image2, and Example3 would display Image3.
HTML
<div id="imgbg">
<p>Portfolio:</p>
<p>I worked with:<br />
Example1, Example2, Example3, Example4, Example5
</p>
</div>
CSS
#imgbg {
height: 100%;
width: 100%;
}
#imgbg:hover {
background-image: url('http://i.imgur.com/9bbjE1Mb.jpg');
}
Does anyone have a solution? Many thanks.
You can use javascript as that
function showBg() {
document.body.style.backgroundImage = "url('http://i.imgur.com/9bbjE1Mb.jpg')";
}
function hideBg() {
document.body.style.backgroundImage = null;
}
<div onmouseover="showBg()" onmouseleave="hideBg()" id="imgbg">
<p>I worked with:
<br />Example1, Example2, Example3, Example4, Example5
</p>
</div>
you should wrap Example1 and Example2 with span tag or div
and add css rules for these wraps.
<span id="ex1">Example1</span>, <span id="ex2">Example2</span>, Example3, Example4, Example5
and add css
#ex1, #ex2 {
display:inline-block;
height:50px;
}
#ex1:hover {
background-image:url('http://i.imgur.com/9bbjE1Mb.jpg');
}
#ex2:hover {
background-image:url('http://i.imgur.com/9bbjE1Mb.jpg');
}
Look at https://jsfiddle.net/4tubcy8e/6/
I hope this may help you.
#imgbg {
position: relative;
width: 100%;
height: 265px;
}
#imgbg .Example:hover:after {
display: block;
}
#imgbg .Example:after {
content: '';
display: none;
width: 160px;
height: 160px;
background: url('http://i.imgur.com/9bbjE1Mb.jpg');
background-size: contain;
position: absolute;
top: 50%;
left: 0;
margin-top: -80px;
margin-left: 145px;
z-index: -1;
}
<div id="imgbg">
<p>Portfolio:</p>
<p>I worked with:<br />
<span class="Example">Example1</span>,
<span class="Example">Example2</span>,
<span class="Example">Example3</span>,
<span class="Example">Example4</span>,
<span class="Example">Example5</span>
</p>
</div>
I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.
Anyways the image for the browse button is a little to the top.
How can i lower it down a little?
Here is the js fiddle.
JsFiddle
Here is the html and css:
<div>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.jpg" />
</div>
</div>
</div>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
I believe this is what you are looking for. jsFiddle
CSS
.moveimage
{
position: relative;
top: 3px;
}
Modified HTML
<img class="moveimage" src="search.jpg" />
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.