Thumbnail images can make your website more beautiful and efficient than a website that does not have these effects. This code also displays thumbnails with a border effect. Normally images have a radius border. By placing the mouse cursor on the images, these images become slightly smaller and a text is displayed instead of the image. Borders are also displayed at the top and bottom of this text, which makes the text more beautiful.


HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
    <div class="cards">
            <div class="card">
                <div class="colour"></div>
                <div class="card-text">
                    <h3>Name</h3>
                    <p>Bipsum dolor sit amet: 
                        <b>ipsum</b>
                    </p>
                </div>
                <div class="colour-bottom"></div>
            </div>
            <div class="card nezuko">
                <div class="colour"></div>
                <div class="card-text">
                    <h3>Name</h3>
                    <p>Bipsum dolor sit amet : 
                        <b>Bipsum dolor</b>.
                    </p>
                </div>
                <div class="colour-bottom"></div>
            </div>
            <div class="card zenitsu">
                <div class="colour"></div>
                <div class="card-text">
                    <h3>Name</h3>
                    <p>Bipsum dolor sit amet: 
                        <b>Bipsum dolor sit amet</b>
                    </p>
                </div>
                <div class="colour-bottom"></div>
            </div>
        </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Fira+Mono:wght@500&display=swap');
body{
    min-height: 95vh;
    background: #080808;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: 'Fira Mono', monospace;
}
*{
    box-sizing: border-box;
}
h3 {
    font-family: 'Permanent Marker', cursive;
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.card {
    overflow: hidden;
    text-align: center;
    position: relative;
    width: 300px;
    height: 300px;
    background-image: url("http://www.devanswer.com/img/tanjiro.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px;
    box-shadow:  30px 30px 40px #141313, -30px -30px 40px #1c1919;
    transform: scale(1.05);
    margin: 2rem;
    max-width: 100%;
    cursor: pointer;
}
.colour{
    position: absolute;
    width: 100%;
    height:15%;
    background: rgb(255,60,14);
    background: linear-gradient(125deg, rgba(255,60,14,1) 28%, rgba(255,255,102,1) 89%);
    right: 120px;
    top:40px;
    transform: rotate(-45deg) translateY(-90px); 
}
.colour::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom:40px;
    background-color: #FF3C0E;
    transform: translateX(-145px);
}
.colour-bottom{
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: rgba(97,34,28,1);
    left: 140px;
    top: 245px;
    transform: rotate(-45deg) translateY(95px); ;
}
.colour-bottom::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom:40px;
    background: rgb(97,34,28);
    background: linear-gradient(331deg, rgba(97,34,28,1) 40%, rgba(125,215,178,1) 66%);
    transform: translateX(-147px);
}
.nezuko {
    background-image: url("http://www.devanswer.com/img/nezuko.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.nezuko .colour {
    background: rgb(227,121,130);
    background: linear-gradient(125deg, rgba(227,121,130,1) 28%, rgba(172,24,69,1) 89%);
}
.nezuko .colour::before{
    background: rgba(172,24,69,1);
}
.nezuko .colour-bottom{
    background: rgba(128,23,34,1);
}
.nezuko .colour-bottom::before{
    background: rgb(128,23,34);
    background: linear-gradient(125deg, rgba(128,23,34,1) 40%, rgba(60,29,40,1) 66%);
}
.zenitsu {
    background-image: url("http://www.devanswer.com/img/zenitsu.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.zenitsu .colour {
    background: rgb(254,241,163);
    background: linear-gradient(125deg, rgba(254,241,163,1) 40%, rgba(254,233,88,1) 59%);
}
.zenitsu .colour::before{
    background: rgba(254,233,88,1);
}
.zenitsu .colour-bottom{
    background: rgb(224,153,45);
}
.zenitsu .colour-bottom::before{
    background: rgb(224,153,45);
    background: linear-gradient(125deg, rgba(224,153,45,1) 40%, rgba(176,123,0,1) 60%);
}
.card-text {
    opacity: 0;
    position: relative;
    top: 80px;
    font-size: 120%;
}
.card:hover{
    border-radius: 50px;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow:  30px 30px 40px #141313,-30px -30px 40px #1c1919;
    animation: large .7s ease-in-out forwards;
}
@keyframes large {
    100% {
        transform: scale(.85);
    }
}
.card:hover .card-text{
    opacity: 1;
}
.card:hover .colour{
    animation: move .7s ease-in-out forwards;
}
@keyframes move { 
    0%{
        transform: rotate(-45deg) translateY(-85px);
    }
    100% {
         transform: rotate(-45deg) translateY(0px);
    }
}
.card:hover .colour-bottom{
    animation: move1 .7s ease-in-out forwards;
}
@keyframes move1 { 
    0%{
        transform: rotate(-45deg) translateY(90px);
    }
    100% {
         transform: rotate(-45deg) translateY(0px);
    }
}
a {
    text-decoration: none;
    color: rgba(224,153,45,1);
}