I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.
Related
I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...
AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>
Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!
If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>
I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">
<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.
the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.
One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
Currently I am toying with an idea for a website. And I was wondering if this was possible (it only would have to run on modern browsers). Any JS, CSS, canvas, server supported code is good.
The line with the icon on the right is fixed on it's position, when scrolling it stays put. The content blocks (the purple and white) scroll just like anything on a website.
Now when a part of the line and icon is over the purple content bock, the line color should be white, and when it is over a white content block, it should be gray.
Is this possible? If so, how?
edit: Perhaps unclear, when the icon part is for 50% above the purple block and for 50% above the white block, it should be matching the color there correctly too.
It may solve your problem
<div clas="mainDiv">
<div class="greyDiv">
</div>
<div class="purpleDiv"></div>
<div class="contentDiv">
Here the large text .....
</div>
</div>
Css:-
.mainDiv{
height: 500px;
border: 1px solid red;
position: relative;
overflow:auto;
}
.greyDiv{
background: #fff;
color: #ccc;
height: 250px;
}
.purpleDiv{
height: 250px;
background: #956BB3;
color: #FFF;
}
.contentDiv{
height: 500px;
overflow:auto;
position: absolute;
top:0px;
}
Please see :- http://jsfiddle.net/anu1718/DnR7e/
I'm searching high and low to achieve what has been done in this fiddle:
http://jsfiddle.net/wNTe6/1/
I need the same effect for an Extjs-Textarea.
(background-image seems to be outdated, I used an image-URL of a random-image)
I need a teaxtarea with a (background?-) image (center/middle) and text.
The text should be scrollable, but has to disappear behind the image.
At the very moment, text is scrolling above my background-image (which is understandable).
My textarea (Extjs):
var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});
CSS-Class:
.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}
Can anyone please help me?
Any help would be highly appreciated!
-nemesis-
Well, I'll give it a shot, but it's not very elegant.
Here is the Fiddle.
Changes in HTML.
<div class='imgdiv'>
<img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
</div>
Changes in CSS.
.imgdiv {
margin: 40px auto;
position: relative;
top: 20%;
left: 5%;
border: 1px solid red;
height: 120px;
width: 100px;
}
Make the outer div with the same height as the scrollable div, but slightly less wide to not cover up the scroll bar. Make its position absolute.
Insert the image in a div and make the div position relative, and you can move it around.
I'll bet someone can give us a nice ELEGANT solution.
AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>