HI thanks for replying me back.
Actually its more like "tabs"
i found similar solution from somewhere.
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap');
section{
padding: 80px 0;
}
img{
max-width: 100%;
}
*{
font-size: 16px;
font-family: 'Noto Sans TC', sans-serif;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
.uppercase__font{
text-transform: uppercase;
}
.capitalize__font{
text-transform: capitalize;
}
.justify{
text-align:justify;
}
.underline{
text-decoration: underline;
}
h1{
font-size: 70px;
}
h2{
font-size: 50px;
@media screen and(max-width: 768px){
font-size: 35px;
}
}
h3{
font-size: 40px;
@media screen and(max-width: 768px){
font-size: 25px;
}
}
h4{
font-size: 30px;
@media screen and(max-width: 768px){
font-size: 20px;
}
}
h5{
font-size: 24px;
@media screen and(max-width: 768px){
font-size: 18px;
}
}
h6{
font-size: 18px;
@media screen and(max-width: 768px){
font-size: 14px;
}
}
h1, h2, h3, h4, h5{
font-weight: 900;
}
@for $i from 1 through 9 {
.fw-#{$i}{
font-weight: 100 * $i !important;
}
}
@for $i from 1 through 9 {
.lh-#{$i}{
line-height: 1rem * $i !important;
}
}
.normal{
font-weight:normal !important;
}
.no__outline{
outline-style: none !important;
}
.pointer{
cursor: pointer;
}
// ul
.ul__list--inline{
list-style:none;
padding:0;
margin:0;
>li{
display:inline-block;
}
}
.ul__list{
list-style:none;
padding:0;
margin:0;
}
.sosmed__list{
li{
a{
width: 40px;
height: 40px;
transition: .5s;
border-radius:50%;
display:inline-block;
position:relative;
font-size: 20px;
color: black;
&:hover{
color:white;
background-color: black;
box-shadow: 0px 10px 40px #3e3c3c7a;
}
i{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
}
}
/* hover change */
.images__logo{
li{
width:170px;
height:53px;
padding: 5px 27px;
border:1px solid transparent;
transition:.5s;
@media screen and(max-width: 576px) {
width:140px;
}
&:hover{
border:1px solid;
}
img{
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 70%;
}
&.active{
border:1px solid;
}
}
}
.images__description{
>img{
max-width:180px;
}
transition: .5s;
min-height: 250px;
display:none;
&.active{
display:block;
}
}
</style>
<script>
$('.images__logo li').mouseover(function () {
$('.images__logo li').removeClass('active');
var no = $(this).data('no');
console.log(no);
$('.images__description').removeClass('active');
$('.data-'+no).addClass('active');
$(this).addClass('active')
});
</script>
<section class="pt-0">
<div class="container">
<ul class="ul__list text-center mb-5">
<li class="text-center images__description data-1 active">
<img src="https://via.placeholder.com/150" class="mb-3" alt="">
<h5 class="fw-1 lh-2">A new way to chat with your communities and friends.
Discord is the easiest way to communicate over voice, video, and text, whether you’re part of a school club, a nightly gaming group, a worldwide art community, or just a handful of friends that want to hang out.</h5>
</li>
<li class="text-center images__description data-2">
<img src="https://via.placeholder.com/150" class="mb-3" alt="">
<h5 class="fw-1 lh-2">American business magazine. Published bi-weekly, it features original articles on finance, industry, investing, and marketing topics. Forbes also reports on related subjects such as technology, communications, science, politics, and law</h5>
</li>
<li class="text-center images__description data-3">
<img src="https://via.placeholder.com/150" class="mb-3" alt="">
<h5 class="fw-1 lh-2">At Jacobs, we make the world smarter, more connected and more sustainable. Together, we’re pushing the limits of what’s possible. We stay ahead to create the new standards our future needs.</h5>
</li>
</ul>
<ul class="ul__list--inline images__logo text-center">
<li class="mr-3 mb-3 mb-sm-0 mr-md-5 p-3 pointer position-relative active" data-no=1><img src="https://via.placeholder.com/100" alt=""></li>
<li class="mr-3 mb-3 mb-sm-0 mr-md-5 p-3 pointer position-relative" data-no=2><img src="https://via.placeholder.com/100" alt=""></li>
<li class="p-3 mb-3 mb-sm-0 pointer position-relative" data-no=3><img src="https://via.placeholder.com/100" alt=""></li>
</ul>
</div>
</section>
