CODEWITHSUNDEEP
htmlcss
Tat
Tat

Reputation: 41

change src image on hover using css

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>

Upvotes: 1

Views: 249

Answers (2)

Awais
Awais

Reputation: 4912

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

Upvotes: 2

Văn Quyết
Văn Quyết

Reputation: 2528

<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;
}

Upvotes: 2

Related Questions