How to move img src a few pixels down in html page - html

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" />

Related

Make some objects invisible when clicked on, only using HTML and CSS, without JS or jQuery

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>

How to add a backdrop over a div (lightbox effect)?

i'm editing an AngularJS project and i want to add a backdrop (like Bootstrap Modal) over the main DIV when users click on search input box.
Here is the HTML code:
<div class="main-box">
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
As you can see the white box appears when users click on the search icon and now i want to add a backdrop over the main DIV, except on the white box.
Here is the LESS code:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
position: relative;
z-index: 0;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
How can i reach this?
Something like this
<div class="main-box">
<div class="backdrop" ng-if="showForm"></div>
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
And add the CSS as
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
}
Here's a very complete article about different methods of achieving what you need
CSS Overlay Techniques

How do I add a image overlay through css?

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;
}

z-index ie placeholder

I got the following html:
<div class="inputContainer">
<div class="inputPlaceholder">Hello world</div>
<input type="text" class="input" />
</div>
The following css:
.inputContainer{ position: relative; background-color: green; }
.input { position: absolute; top: 0px; left: 0px; background: transparent none; -webkit-appeareance: none; }
.inputPlaceholder { position: absolute; top: 0px; left: 0px; color: gray }
And the following js:
$('.inputContainer .input').keyup(function(){
$(this).parent().find('.inputPlaceholder').hide();
if($(this).val() == ''){
$(this).parent().find('.inputPlaceholder').show();
}
});
The problem is with IE, you cannot focus on the input text because of the z-index of the placeholder, I have tried to put the .inputPlaceholder z-index to -1 and .input to 100 but nothing is working, it is working perfect in other browsers though, I know that Foursquare used this same technique on their searchbox.
How can I solve this problem, and what is causing it?
Re-arrange your HTML to "naturally" change the stacking order:
<div class="inputContainer">
<div class="inputPlaceholder">Hello world</div>
<input type="text" class="input" />
</div>
It's quite old question, but I had the same problem with IE 9. Solution is to add 'fake' background color, for example:
input{
background-color: rgba(0,0,0,0);
}
Important: background can't be set to transparent property, it has to be transparent with rgba

Creating a "disabled" look by using a mask

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.