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>
Related
so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.
Here is the HTML (just in case it's needed)
<!-- social media bar -->
<div class="socials">
<!-- instagram link -->
<div class="instaBox" id="socialBox">
<a href="#">
<img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
</a>
</div>
<!-- tiktok link -->
<div class="tiktokBox" id="socialBox">
<a href="#">
<img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
</a>
</div>
<!-- youtube link -->
<div class="youtubeBox" id="socialBox">
<a href="#">
<img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
</a>
</div>
<!-- vimeo link -->
<div class="vimeoBox" id="socialBox">
<a href="#">
<img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
</a>
</div>
</div>
And here is the CSS
/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}
#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}
#socialsLogo{
border: none;
width: 100%;
}
#socialsLogo:hover{
background: #b0b0b0;
}
I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.
Logo's normally
Logo's with the hover effect
You can use filter
If your goal is to change the icons lines colors, then use svg images and change their color
img { transition: filter .25s ease-out }
img:hover { filter: grayscale(.5) }
<img src="https://placekitten.com/200/300" />
According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.
You could actually just change the opacity to emulate a gray icon color.
As an alternative you could also change contrast.
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
body {
background-color: #000;
}
.socialBox {
text-align: center
}
.socialLink {
background-color: #000;
color: #fff;
display: inline-block;
text-align: center;
width: 1em;
height: 1em;
font-size: 5em;
}
.socialLink img {
width: 100%;
}
.socialLinkFontAwesome {
color: #fff;
}
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
.socialLink:hover .icon-img2 {
opacity: 0.5;
}
.socialLinkFontAwesome:hover {
color: #999;
}
/* just for adjusting example icon sizes */
.svg-inline--fa {
height: 1em;
font-size: 0.75em;
vertical-align: 0.125em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<!-- tiktok link -->
<p class="socialBox">
<a class="socialLink tiktokLink" href="#">
<img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink tiktokLink2" href="#">
<img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>
</p>
Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:
<div class="socialBox tiktokBox">
You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.
I have two images with text over them.
When I go to one image, the text of that image should disappear.
The code I wrote is ok and works almost fine.
<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
<div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
<div>
Css:
.sidebarimage, .sidebarimagesupermsg {
position: relative;
width: 100%; /* for IE 6 */
}
.h3sidebarimage, .h3sidebarimagesupermsg {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.h3sidebarimage span, .h3sidebarimagesupermsg span {
color: white;
font: bold 22px/45px Helvetica, Sans-Serif;
letter-spacing: 2px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Please see the demo here:
http://jsfiddle.net/pikk/7dmzd7yc/
However it works fine for the 1 image. But if I go hover the 2 image, disappears also the text from the 1 image. And that's wrong.
Since I will have a lot of similar images in a sidebar, I don't want to duplicate the CSS code for each image. So I would like to know if there is a solution that permits me to keep only one copy of the css code.
I would like to keep the less CSS code as possible.
Thanks
The problem is that you are not closing your wrapping <div> tags. This should work:
<div class="sidebarimagesupermsg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
</div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
</div>
Here is an updated jsFiddle.
In addition to #JCOC611's answer above (about closing your <div> tags), you can also greatly simplify your CSS by using element tags instead of custom classes for each item.
In your question you mention:
I don't want to duplicate the CSS code for each image.
As it currently stands, your markup would need to add a selector for each image/h3 you add. If you generalize the selectors you can add a (theoretically) infinite amount without touching the CSS.
See this updated JS Fiddle for the simpler CSS.
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/
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 */
}
I have an img within an link within a list:
<li class="list-group-item">
<a class="video-thumbnail-link" href="javascript:void(0)" data-bind="click: (function(guid){ x.y.z.someFunction(guid); }).bind($data, $data.Guid)">
<img class ="video-thumbnail-icon" alt="picture" src="/Content/Images/picture.ico" />
</a>
<a class="anotherrandomcss" ...>
<img class="randomcss" ></img>
</a>
</li>
I want the first image to appear only on a .hover but I know img does not support CSS .hover so I apply it to the link. My css :
.video-thumbnail-icon{
height: 20px;
left: 100px;
position: absolute;
width: 20px;
}
.video-thumbnail-link {
visibility: hidden;
}
.video-thumbnail-link a:hover {
visibility: visible;
}
This hides my link and my img but on hover, it doesn't reappear.
Any idea how I could do this?
Btw, the only reason why I don't use background img is that in the same li, there is another img and this one is bound with knockout and it hides the other images's background. The first one needs to appear on top.
So what I did here; hide the a tag and since all img and a tag inside the li. so on :hover I just make it visible.
Check DEMO.
.video-thumbnail-link {
visibility: hidden;
}
.list-group-item:hover a {
visibility: visible;
}