change src image on hover using css

Question

2 image appear in same time, up and down. I want hover image display none.

Hover image is appear below primary image. Primary image is hide when hover.

Seems like dont work. and really need help on this.

.card-img-top {
    border-radius: 0;
	height: 250px;
	width: 100%;
    top: 50%;
  	left: 50%;
  	transform: translate(0%, 0%);
	object-fit: cover;
	margin-bottom: 20px;
}

.card a img {
  display: block;
}
.card a:hover img:first-child {
  display: none;
}

<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">	
    <a href="#">
        <img class="card-img-top" src="images/True Blue Asia.jpg"/>
        <img class="card-img-top" src="images/Asia Bagus.jpg"/>
        <div class="card-img-overlay d-table-cell align-middle">
            <p>true blue asia</p>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-md-3">
                    <div class="card-date">Oct 2019</div>
                </div>
                <div class="col-12 col-md-9">
                    <div class="card-title">Roots, Heritage, Authenticity</div>
                    <div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
                </div>
            </div>				
        </div>		          
    </a>
</div>

Văn Quyết · Accepted Answer · 2019-12-19 07:58:55Z

2

<div class="card">
    <img src="/image_displayed_as_default" class="hover-hidden"/>
    <img src="/image_displayed_when_hover" class="hover-only"/>
</div>

.card img {
    opacity: 1;
    transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
    opacity: 0;
}

answered Dec 19, 2019 at 7:58

Văn Quyết

2,5481 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tat Over a year ago

i change opacity to display none.. its working.. thanks sir

Arlien · Accepted Answer · 2019-12-19 08:26:05Z

2

You are looking for this

Pure CSS solution

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>

Your code solution

Issue i you are not hide second image initially

.card-img-top {
    border-radius: 0;
	height: 250px;
	width: 100%;
    top: 50%;
  	left: 50%;
  	transform: translate(0%, 0%);
	object-fit: cover;
	margin-bottom: 20px;
}

.card a img {
  display: block;
}
.card a:hover img:first-child {
  display: none;
}

.card a .card-img-below{
  display: none;
}
.card a:hover .card-img-below {
  display: block;
}
a{
  display:block;
}

<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
	<a href="#">
		<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
		<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
		<div class="card-img-overlay d-table-cell align-middle">
			<p>true blue asia</p>
		</div>
		<div class="card-body">
			<div class="row">
				<div class="col-12 col-md-3">
					<div class="card-date">Oct 2019</div>
				</div>
				<div class="col-12 col-md-9">
					<div class="card-title">Roots, Heritage, Authenticity</div>
					<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
				</div>
			</div>				
		</div>		          
	</a>
</div>

Change the image url

edited Dec 19, 2019 at 8:26

Arlien

1321 silver badge19 bronze badges

answered Dec 19, 2019 at 7:14

Awais

4,9424 gold badges20 silver badges43 bronze badges

6 Comments

Tat Over a year ago

hi, thanks for your help. but im looking for another option using src hover image without js

Awais Over a year ago

Dear, The first one is pure css Solution second one is using JS

Tat Over a year ago

im using this option jsfiddle.net/m4v1onyL but not sure why hover image is appear

Awais Over a year ago

Its simple First he hide the second image and then on hover he display over that and hide first one. as second image is below first in html so it come over top

Tat Over a year ago

I follow exactly but weirdly not working. Hover image appear before hover

|

Collectives™ on Stack Overflow

change src image on hover using css

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related