Hey guys i'm having an issue with my div and image (image is on the same div) the problem is that the top of the div where my header (h1) is and the image on the div respond independently.
I want everything to happen regardless of where I hover on the div but at the moment if i hover on the header the image doesn't change and vice versa. So I was wondering how to make both my Div and image activate their "hover" instructions when either is hovered on.
currently the image is getting the shadow from the div hover (but still only when the image is hovered on) so i just want this and the image to get darker even if the header is hovered on.
not really sure what code would be helpful here so if you want anything else just ask. Thanks in advance.
html:
<a href="#">
<div id = "item1">
<div id = "header">
<h1>Results</h1>
</div> <!-- header end -->
<img src="Olympics1.png" alt = "olympic pic">
</div><!-- item 1 -->
</a>
css:
.mainBody #item1 :hover
{
background-color: #50B847;
color: #ffffff;
box-shadow: 10px 10px 20px 1px #ccc;
}
#item1 img:hover
{
-webkit-filter: brightness(35%);
}
Try this-
.mainBody #item1:hover
{
background-color: #50B847;
color: #ffffff;
box-shadow: 10px 10px 20px 1px #ccc;
}
.mainBody #item1:hover img
{
-webkit-filter: brightness(35%);
}
Edits-
space removed from .mainBody #item1 :hover
modified #item1 img:hover
Removing space makes the header part work and your image changed when the mouse hovered over it, but in the modified one, hover over 'item1' and it changes how the header and image looks.
Related
At least in firefox, when I try to drag an image (the one on the left), I get a thin white border on the bottom and the right. And when I wrap the image in an <a> then I get a red border around the whole thing. How can I drag an element without these borders appearing in both cases? (In the stackoverflow code preview it might not show the border for the image on the left but it shows it if you try with an html file in your browser.)
body {
background-color: black;
}
a {
padding: 30px;
background-color: black;
display: inline-block;
border: none;
}
img {
border: none;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>
This appears to be a usability feature of Firefox, so people know what they're dragging (IIRC, a linked image is just the link while an unlinked image is the image itself). You can fake that out by using onclick instead.
In this sample, I've added a third copy of the sample image (nice random effect, btw). I've changed the mouse cursor to look the way it does for a link and set the link target in the title attribute so it can be seen during a mouseover event. Upon clicking, Javascript will then set the current page location to the contents of that title.
This of course introduces another (imho even worse) usability issue: users can't right-click or middle-click on that link, say to copy the link or open it in a new tab. They (obviously) can't drag the link anywhere either.
(I shrank the images and the padding so they can still appear three abreast in a single non-wrapping row.)
body {
background-color: black;
}
a {
padding: 5px;
background-color: black;
display: inline-block;
border-color: none;
}
a.fake_link[onclick] {
cursor:pointer;
}
img {
border: none;
width: 175px;
}
<img src="https://picsum.photos/200/200">
<a href>
<img src="https://picsum.photos/200/200">
</a>
<a title="https://stackoverflow.com" class="fake_link"
onclick="location.href=this.title">
<img src="https://picsum.photos/200/200">
</a>
(If you want to experiment with that but stay on this page, just change the onclick value to alert(this.title) instead of location.href=this.title)
I have a page where I have a Wordpress plugin WPDATATABLES using HTML to display some information that I'm pulling from various sites (importXML). The idea is for the page to look something like this https://www.labelradar.com/labels/chillyourmind/profile, that when you over over a particular element, the entire element reacts and changes into a white logo with the main color of the social media icon. Currently, I am able to get all the CSS working except for one small detail, and that's the white icon. It only changes when you are within range of the image outline of the icon.
Here's the page: https://trapparty.net/theparty/
I know there must be someway to force the div to react at the same time when I hover on the outermost div element controlling the entire thing. Here's a pastbin of the entire CSS code I'm using:
https://www.pastiebin.com/5cf313feb2753
And below is one HTML element with the nested DIV elements.
I've tried combining some CSS like this to try and call the div on the outside:
.soundcloud.soundcloudicon .soundcloudwhite {
display: none;
position: absolute;
top: 0px;
left: 0;
z-index: 99;
}
<center><a href="https://www.instagram.com/thetrapparty/" target="_blank"><div class="instagram"><div class="instagramicon">
<center><img src="https://www.trapparty.net/wp-content/followicons/instagram.png" height="263" width="178" alt="instagram">
</center>
<center><img src="https://www.trapparty.net/wp-content/followicons/instagramwhite.png" height="263" width="178" class="instagramwhite" alt="instagramwhite"></center>
</div>
<div class="igcount"><h2><center><font color="white">47.4k</font></center></h2></div>
<div class="followerstextig">Followers</div></div></a></center>
The actual result I'd like can be seen in the Label Radar link above, but essentially, I want the white icon to show up whenever I hover over the entire outer div element.
Reading the title it would be something like:
div img {
border: 1px solid black;
}
div:hover img {
border: 1px solid red;
}
I have created a webpage with three images with a css property which gives it a border when hovered but when i hover all the image move a little from their origional position also how to align all the images in center
JSFIDDLE DEMO HERE!
<head>
<title>Play Stone Paper scissors
</title>
<style>
img {
margin:40px;
margin-left:10px
}
img:hover{
border:dashed;
border-color:#4DFFFF;
}
div{width: 90%; margin: 0px auto;
margin-top:40px;}
</style>
</head>
<body>
<div>
<img src="rock.jpg">
<img src="paper.jpg">
<img src="scissors.jpg">
</div>
The answer is the border itself. It changes your dom's element width. Border itself doesn't have an off state of the same width, which is what you are expecting.
Rather you need to create the off state width to remove this shake.
Either an off state with the border width or some other margin/padding to compensate.
http://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Similar to : How can we avoid the shake when we hover over an element and set its border?
From the linked SO question above, fixed fiddle: http://jsfiddle.net/smitkhakhkhar/tn9Kj/
Added
border:dashed;
border-color:transparent;
I made a very small change in KnowHowSolutions original idea - thanks! - and wonder what people would think about a different approach - FIDDLE.
Put the full border in, but make it tansparent, and when hovered, change the color.
Is there any downside to this?
CSS
img {
margin: 40px;
margin-left: 10px;
border: dashed;
border-color: transparent;
}
img:hover{
border-color: #4DFFFF;
}
I want to add rounded corners to my images using CSS and also change the opacity on mouseover because this is cute. There's a bug: after mouseover, the image disappears.
The CSS is pretty simple:
.article img {
margin-bottom: 5px;
-moz-border-radius: 15px; /* for Firefox */
-webkit-border-radius: 15px; /* for Webkit-Browsers */
border-radius: 15px; /* regular */
}
.article:hover .img {
opacity: 0.8;
}
html also just for a test (this is first image that I have googled):
<li class="article">
<div class="img">
<a href="#">
<img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
</a>
</div>
</li>
You can see it on jsfiddle: http://jsfiddle.net/9DjLT/3/
Browser: ff19
I encountered this problem recently while trying to implement block-level links on my website, and I solved it by adding the following rule to the un-hovered img declaration:
border: 0.001em solid transparent;
A hack, to be sure, but it seems to work.
I think you have problem in css because of li:hover its taking 100% width. So till your mouse cursor on li your image effect by opacity. Just try below change in CSS
.img a:hover{
opacity: 0.8;
}
FWIW, I hit a similar problem in Chrome 38. In my case, I had a div with a border-radius value, and an image element with a transparency value, and the transparent image was hidden. To fix this, I added a non-1 opacity to the parent element (with the border-radius). Something like this:
.round_box {
border-radius: 5px;
opacity: 0.999999;
}
.transparent {
opacity: 0.6;
}
<div class="round_box">
<div class="transparent">
</div>
... Adding opacity: 0.999999; to the parent element made the transparent element display properly. I should note that I also have a lot of other interesting styles going on - drop shadows, column layout - but, maybe a similar hack will work for others.
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!