Some code...
<a href="#">
<div class="col-md-4">
<img src="image.jpg">
<div class="text">TEXT</div>
</div>
</a>
and some css to start...
.col-md-4 {
background color: #000;
}
.text {
color: #fff;
}
I want to change the col-md-4 IMAGE opacity on rollover. At the same time, i also need the TEXT to change color on rollover.
I can get one or the other working - text or div, but not both.
Any idea what I need to do to target both on rollover?
Based on your comments I believe that this is what you are after.
.col-md-4:hover img {
opacity:0.6
}
This will change the opacity of the image only when the div is hovered.
For the text change
.col-md-4:hover .text {
color: /* other color */
}
Related
I created social media hyperlicks with images(social media icons) and want to add a hover effect to these images which is not working. I am trying to add hover effect to the images which are in hyperlink tag.
my code is:
<div class="icons">
<img class="fb" src="images/fb.png">
<img class="insta" src="images/insta.png">
<img class="whatsapp" src="images/whatsapp.png">
<img class="yt" src="images/yt.png">
</div>
I want to set hover effect to these img's in hyerlink so when anyone hovers, img will reduce some opacity by (opacity : 0.5%;). How to accomplish this task?
Following code worked on the localhost webpage :
.icons a:hover img{
opacity: .2;
transition: all .75s;
-webkit-transition: all .75s;
}
But this code is not working on the live webpage :(
(I have same index.html for both local and live webpage still this code is only working in localhost page only.)
user the :hover CSS pseudo-class
a {
width: 150px;
display: inline-block;
}
img {
width: 100%;
}
/* Selects any <a> element when "hovered" */
.icons a:hover img {
opacity: .5
}
<div class="icons">
<img class="fb" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high">
<img class="insta" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high">
<img class="whatsapp" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high">
<img class="yt" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high">
</div>
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
I have looked around and cannot find an answer for this, maybe I am just making my code too convoluted.
I have a div that is making up my menu links. The wrapper div will be a link that contains a div for my CCS Circle and a span for my link text:
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>
I am trying to make it so that when I hover ANYWHERE over the wrapper div it changes the color of the shape AND link. So far I have only been able to manage individual hovers on the shape OR the link.
my CSS is:
.menu-circle {
width: 60px;
height: 60px;
background: black;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin:auto;
}
.menu-text{
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
}
.menu-circle:hover{
background:#e7e7e7;
}
.menu-text:hover{
color:#e7e7e7;
}
.menu-item{
text-align:center;
}
you can see the example here
If you want to change the colors when you hover ANYWHERE on the wrapper div then you must call the hover state on the wrapper dive. Like this:
mean-item:hover .menu-circle {change colors here}
This however would only change the circle when hovering anywhere in the wrapper div (the wrapper being menu-item) So you would need a second hover state for menu-text
mean-item:hover .menu-text {change colors here}
See here for working example:
http://jsfiddle.net/s6jkja5r/
Add this code to your style
menu-circle:hover ~ .menu-text{
color:#e7e7e7;
}
DEMO
Try this in your css:
.menu-item:hover div, .menu-item:hover span {
background:#e7e7e7;
color:#e7e7e7;
}
It was a minor CSS change.
.menu-item:hover .menu-circle {
background-color: #f4f;
}
.menu-item:hover .menu-text {
color: #f4f;
}
This fiddle should do exactly what you're trying to achieve:
http://jsfiddle.net/9qg3vjm3/10/
Check this fiddle
This changed css will change the background color of the circle div and the text color only while hovering on the circle div..
CSS
.menu-item:hover .menu-circle{
background:#e7e7e7;
}
.menu-item:hover .menu-text{
color:#e7e7e7;
}
HTML
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>