Im trying to move this image in css but it just wont move no mater how many times I test it, what am I doing wrong?
#yahoo1 {
position: absolute;
top: 100px;
left: 800px;
}
<p id="yahoo1">
<a href="http://www.yahoo.com">
<img border="0" alt="yahoo" src="images/yahoo.png" width="300" height="300">
</a>
</p>
#yahoo1 {
position: relative;
}
#yahoo1 a {
position: absolute;
top: 100px;
left: 800px;
}
#yahoo1 img {
display: block;
}
Related
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
My code: https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF
I'm currently semi-new to javascript/html/css and I'm having trouble of having the main menu page disappear at the click of the start button, and then having the word Test appear as soon as the menu disappears. Any recommendations would be helpful! Also, if possible could you also explain how it works/?
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft> <input type="button" id="start" class="hide" value = "Start Game"/> </divbottomleft>
<divbottomright><input type="button" id="quit" value = "Quit"/>
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none" >
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$(this).parents("menu").hide();
$("game").parents("game").toggle();
});
});
</script>
My CSS Code is:
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright{
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
You have the right idea, though your jQuery just needs some slight modification. It's actually surprisingly simple; all you have to do is hide the menu and show the game itself through the same click function:
$(document).ready(function() {
$(".hide").click(function() {
$("#menu").hide();
$("#game").show();
});
});
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft>
<input type="button" id="start" class="hide" value="Start Game" /> </divbottomleft>
<divbottomright>
<input type="button" id="quit" value="Quit" />
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none">
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
I've also created a JSFiddle showcasing this here.
Hope this helps! :)
In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!
To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.
you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here
You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>
I have a grid of images with same width but with diferent height.
On hover the image i want to display two differnt links to get info of the image and the author.
The problem is i can't vertical aling the links over the image :/
HTML:
<div class="item">
<div class="img-work">
<img src="img/grid1.jpg" alt="" class="img-grid">
<a href="#" class="zoom"">
<img src="img/hover-item.png" alt="">
</a>
<a href="#" class="info">
<img src="img/hover-info.png" alt="">
</a>
</div>
</div>
CSS:
div.img-work a.zoom {
left: 31%;
position: absolute;
top: 27%;
visibility: hidden;
width: 38px;
}
div.img-work a.info {
left: 50%;
position: absolute;
top: 27%;
visibility: hidden;
width: 39px;
}
jQuery:
$('div.img-work').hover(function() {
$(this).children('a').css('visibility', 'visible');
$(this).children('img').css('opacity', '0.5');
}, function() {
$(this).children('a').css('visibility', 'hidden');
$(this).children('img').css('opacity', '1');
});
As you can't see i don't how to align those link vertically . Any hints would be appreciate. Thank you in advance
Here's a CSS solution: http://jsfiddle.net/08vorn1s/.
The images are vertically and horizontally centered within their container. You can easily adjust the code if the images need to be bottom-aligned.
HTML:
<div class = "grid">
<div class = "row">
<div class = "cell">
<img src = "http://placehold.it/150x150 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x170 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x200 " />
<div class = "links">
Info
Author
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.grid {
display: table;
width: 100%;
}
.grid .row {
display: table-row;
}
.grid .row .cell {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell > .links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: none;
}
.cell:hover > img {
opacity: 0.5;
}
.cell:hover > .links {
display: block;
}
Have you tried setting your property like so position: relative? You might also want to adjust your left and top CSS properties based on image size.
Your .item element needs to have a position: relative; and your overlay element (.info) needs to have:
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
display: block;
I want to set the image src by using a text returned by a JavaScript function. What is the correct way to assign JavaScript return value to src? Code below:
What I am trying to achieve here is adding a dummy random number to the end of the url in order to get rid of browser image caching.
<body><div class="slideshow" style="position: absolute;">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
</div>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);//-->
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
</script></body>
use jQuery. You will need to add an id attribute to your img tag but this should do it.
<img id="imgLink1" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
$().ready(function(){ $('#imgLink1').att('src', getMyLink()); });
My advices : avoid inline JS, use CSS, and use JQuery.
I would do like this :
<body>
<div class="slideshow" style="position: absolute;">
<img id="img1" src="" class="myImages" title="image">
<img id="img2" src="" class="myImages" title="image">
</div>
<script>
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
//Assign image source and display it (you have defined display:none attribute)
$('#img1').attr('src', getMyLink()).fadeIn(300);
$('#img2').attr('src', getMyLink()).fadeIn(300);
</script>
<style>
.myImages {
width : 1024px;
height : 768px;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 5;
opacity: 0;
}
</style>
</body>