how do i add a link to a Div like below and make it clickable? I am using an image for the background of the Div and i want to make the whole image clickable.
<div class="grid__item-wrap">
<div class="grid__item" style="background-image: url(img/5.jpg)">
</div>
</div>
I have tried below two methods but none of them worked out for me.
Method 1:
<div class="grid__item-wrap">
<div class="grid__item" style="background-image: url(img/1.jpg)">
<div class="frame__links">
<a style="pointer-events: auto" class="frame__links" href="https://www.google.com/"></a>
</div>
</div>
</div>
Method 2:
<div class="grid__item-wrap">
<div class="grid__item" href="https://www.google.com/" style="background-image: url(img/4.jpg); pointer-events: auto;">
</div>
</div>
You need to put the div you wanted clickable inside <a> tag.
<a href="https://www.google.com/">
<div class="grid__item-wrap">
<div class="grid__item" style="background-image: url(img/5.jpg)">
</div>
</div>
</a>
.frame__links {
display:block;
height:100px;
}
.grid__item {
background-image: url(https://www.w3schools.com/w3css/img_forest.jpg);
background-repeat: no-repeat;
background-size: auto;
text-align: center;
color: white;
padding: 50px;
}
<a href="https://www.facebook.com/">
<div class="grid__item-wrap">
<div class="grid__item">
click here
</div>
</div>
</a>
Put the div element that you want to inside the a tag.
Wrapping the div inside an <a> tag should work. And style it in CSS with the cursor property to show that it is clickable.
You can do that by using onclick="window.location.href as you wanna redirect when you click on div
<div style="cursor:pointer;background-image: url(img/4.jpg)" onclick="window.location.href = 'https://www.w3schools.com';">Hello</div>
Method-2: You can wrap your div inside a tag and give background-image for the div and href path to a tag.
Related
I have some HTML/CSS that looks something like this:
#left a:hover img {
border: 5px solid red;
}
<div id="information">
<div id="left">
<a href="URL">
<img src="IMG">
<span id="button">CLICK</span>
</a>
</div>
<div id="right">
CLICK
</div>
</div>
I want to make it so that when you hover over either link, a CSS rule is applied to the image in left. I can get the link on the left, but not the right.
I want to make it so that all hovering over any links in "#information" will apply this rule to any image that fits "#information #left a img". What's the best way to do this? Is there a way to do it in one line?
We weren't able to figure out how to do this with exclusively CSS, therefore see below for a jquery alternative.
(function(){
$('#information').find('a').each(function(i, element){
$(element).mouseover(function(){
$('#left img').addClass("hoveredThing");
});
$(element).mouseleave(function(){
$('#left img').removeClass("hoveredThing");
});
});
}());
.hoveredThing { border:5px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="information">
<div id="left">
<a href="URL">
<img src="img" >
<span id="button">CLICK</span>
</a>
</div>
<div id="right">
<a href="URL">
CLICK
</a>
</div>
</div>
This doesn't work because of the structure of your html. You are saying to select the img inside the hovered "a" tag. You need the img outside of the "a" and use a sibling selector.
A fiddle
https://jsfiddle.net/05jwnw7v/
#information a:hover~img{border: 1px solid red;}
<div id="information">
<div id="NewContainer">
CLICK
<a href="URL">
<span id="button">CLICK</span>
</a>
<img src="IMG" >
</div>
</div>
try this
#information div a:hover img{border:5px solid red;}
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
How can I use an entirely separate CSS file to change/override only the URL for the image IMAGE.png?
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="https://IMAGE.png"></img>
</a>
</div>
</div>
</div>
</div>
Thanks so much!
If you wants to achieve it with css, do it like this (Recommended).
.btn {
display: block;
width: 80px;
height: 80px;
background: url(http://mygimptutorial.com/images/button-with-metal-ring/13.jpg) no-repeat;
background-size: contain;
text-align: center;
color: #fff;
text-decoration: none;
}
.btn:hover {
background: url(http://mygimptutorial.com/images/button-with-metal-ring/8.jpg) no-repeat;
background-size: contain;
}
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="btn" href="http://domain.com" tabindex="-1"></a>
</div>
</div>
</div>
</div>
And with js do following.
$('.logo img').hover(function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/8.jpg');
},function(){
$(this).attr('src','http://mygimptutorial.com/images/button-with-metal-ring/13.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div class="class3">
<div id="id3">
<a class="logo" href="http://domain.com" tabindex="-1">
<img src="http://mygimptutorial.com/images/button-with-metal-ring/13.jpg"></img></a>
</div>
</div>
</div>
</div>
use content in your dark-mode class
darl
content:url(image.jpg);
You can't change it with CSS, you need Javascript for that.
But if you are trying to change the image on for example hover, you could remove the img-tags and use a div instead on which you set a background-image.
In your CSS you can then create a block where you change the image on hover.
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>