Bootstrap Thumbnails:

Animated Modals

Having a monotonous design for a website can be harmful to the owner and it is possible that many people run away from the page. On the other hand, applying a beautiful effect can change the appearance of the website and differentiate it from others. We have prepared the Animated Modals in this post with an amazing design. You may own a website and you have to add many images daily. This Bootstrap Thumbnail Code can improve the beauty of your website. The audiences look at the pictures with an attractive effect.

By looking at the below preview, you can see a long list with different titles. You can change these titles and add your own images. The main page of this CSS Thumbnail with Modal is simply white. If you click on a title on this HTML Animated Thumbnail, you can see its related picture with an animation effect on the left side. On the right side of the picture, there is the title and description of the image. If you want to close this page, you should choose the exit button. As soon as you close the picture, the main list will appear. You can download and use the JavaScript Thumbnail Modal for your website to change its design.

Bootstrap Thumbnail Code

CSS Thumbnail with Modal

HTML Animated Thumbnail

Javascript Thumbnail Modal

<!-- This script got from frontendfreecode.com -->
<section class="theteam lightblueback p-0 p-md-5">
        <div class="row d-flex">
            <!-- The Modal -->
            <div class="col-3 col-lg-3 my-3" style="cursor:pointer">
                <div class="myBtn_multi modalpreview hoverexpand ">
                    <img class="modalimage rounded" src="http://frontendfreecode.com/img/triangle.jpg">
                    <h4 class="col-12">Name and Family</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                </div>
                <div class="modal modal_multi has-scroll-reveal fadeIn">
                    <!-- Modal content -->
                    <div class="modal-content has-scroll-reveal grow p-1 overflow-hidden">
                        <span class="close close_multi bluetext">×</span>
                        <div class="row p-4 h-100">
                            <div class="col-6 d-block modal_inner_image" style=""></div>
                            <div class="col-6 col-lg-6 p-0 p-md-3 delay modal-text">
                                <h3 class="titlefont bluetext">Your Name</h3>
                                <h5>Your Title</h5>
                                <div>Here's where the bio goes. Or whatever text you'd like for whatever purpose you have.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.modalpreview {
	transition: all .3s linear;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.modalimage {
	width: 100%;
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	outline: 0;
	z-index: 10000;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
	max-height: 100vh;
	max-width: 1000px;
	margin: 20px;
	background-color: #fefefe;
}
.close {
	margin-left: auto;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}
.modal_inner_image {
	min-height: 400px;
	z-index: 1000;
	background-image: url(http://frontendfreecode.com/img/triangle.jpg); 
	background-size:cover; 
	background-position:center;
}
.modal-content {
	width: 100%;
}
/*Animations*/

/* Fade in from direction */

.has-scroll-reveal {
	animation-play-state: paused;
}
.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-play-state: running;
}
.fadeIn {
	opacity: 0;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.fadeInUp {
	opacity: 0;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.fadeInLeft {
	opacity: 0;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
.fadeInRight {
	opacity: 0;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
.fadeInDown {
	opacity: 0;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.grow {
	transform: scale(0);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: grow;
	animation-name: grow;
}
@keyframes grow {
	from {
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(2.5rem);
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translateY(-2.5rem);
		transform: translateY(- 2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-2.5rem);
		transform: translateX(-2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(2.5rem);
		transform: translateX(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.modalscale {
	transform: scale(0);
	opacity: 0;
}

// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
    for (i = 0; i < modal_btn_multi.length; i++) {
        modal_btn_multi[i].setAttribute('data-index', i);
        modalparent[i].setAttribute('data-index', i);
        span_close_multi[i].setAttribute('data-index', i);
    }
}
for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(this).addClass('modalscale');
        modalparent[ElementIndex].style.display = "flex";
    }

    // When the user clicks on <span> (x), close the modal
    span_close_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(modal_btn_multi).removeClass('modalscale');
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
    };

}
window.onload = function () {
    setDataIndex();
};
window.onclick = function (event) {
    if (event.target === modalparent[event.target.getAttribute('data-index')]) {
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
        $(modal_btn_multi).removeClass('modalscale');
    }
};
// Animations
// SCROLL UP ANIMATION__________________________________________________________________
jQuery(document).ready(function ($) {
    let revealClass = '.animated';
    let targetClass = '.has-scroll-reveal:not(' + revealClass + ')';
    let offset = 100; // Offset from bottom of viewport in pixels.
    let winHeight = $(window).height();
    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function () {
        winHeight = $(window).height();
    });
    // Fire when page loads
    triggerAnimation(revealClass, targetClass, offset, winHeight);
    // Also fire on scroll
    $(window).on('scroll', function () {
        triggerAnimation(revealClass, targetClass, offset, winHeight);
    }); // window.on('scroll')
}); // document.ready
function triggerAnimation(revealClass, targetClass, offset, winHeight) {
    // Get current scrollPos
    let trigger = $(window).scrollTop() + winHeight - offset;
    // Loop through elements we're affecting
    $(targetClass).each(function () {
        let elementOffset = $(this).offset().top;
        if (elementOffset < trigger) {
            $(this).addClass(revealClass.replace('.', ''));
        }
    });
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<style>
.modalpreview {
	transition: all .3s linear;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.modalimage {
	width: 100%;
}
.modal {
	position: fixed;
	top: 0;
	left: 0;
	outline: 0;
	z-index: 10000;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
	max-height: 100vh;
	max-width: 1000px;
	margin: 20px;
	background-color: #fefefe;
}
.close {
	margin-left: auto;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}
.modal_inner_image {
	min-height: 400px;
	z-index: 1000;
	background-image: url(http://frontendfreecode.com/img/triangle.jpg); 
	background-size:cover; 
	background-position:center;
}
.modal-content {
	width: 100%;
}
/*Animations*/

/* Fade in from direction */

.has-scroll-reveal {
	animation-play-state: paused;
}
.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-play-state: running;
}
.fadeIn {
	opacity: 0;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.fadeInUp {
	opacity: 0;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.fadeInLeft {
	opacity: 0;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
.fadeInRight {
	opacity: 0;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
.fadeInDown {
	opacity: 0;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.grow {
	transform: scale(0);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: grow;
	animation-name: grow;
}
@keyframes grow {
	from {
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translateY(2.5rem);
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translateY(-2.5rem);
		transform: translateY(- 2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-2.5rem);
		transform: translateX(-2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(2.5rem);
		transform: translateX(2.5rem);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.modalscale {
	transform: scale(0);
	opacity: 0;
}
</style>

</head>
<body>
<section class="theteam lightblueback p-0 p-md-5">
        <div class="row d-flex">
            <!-- The Modal -->
            <div class="col-3 col-lg-3 my-3" style="cursor:pointer">
                <div class="myBtn_multi modalpreview hoverexpand ">
                    <img class="modalimage rounded" src="http://frontendfreecode.com/img/triangle.jpg">
                    <h4 class="col-12">Name and Family</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                </div>
                <div class="modal modal_multi has-scroll-reveal fadeIn">
                    <!-- Modal content -->
                    <div class="modal-content has-scroll-reveal grow p-1 overflow-hidden">
                        <span class="close close_multi bluetext">×</span>
                        <div class="row p-4 h-100">
                            <div class="col-6 d-block modal_inner_image" style=""></div>
                            <div class="col-6 col-lg-6 p-0 p-md-3 delay modal-text">
                                <h3 class="titlefont bluetext">Your Name</h3>
                                <h5>Your Title</h5>
                                <div>Here's where the bio goes. Or whatever text you'd like for whatever purpose you have.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
    for (i = 0; i < modal_btn_multi.length; i++) {
        modal_btn_multi[i].setAttribute('data-index', i);
        modalparent[i].setAttribute('data-index', i);
        span_close_multi[i].setAttribute('data-index', i);
    }
}
for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(this).addClass('modalscale');
        modalparent[ElementIndex].style.display = "flex";
    }

    // When the user clicks on <span> (x), close the modal
    span_close_multi[i].onclick = function () {
        var ElementIndex = this.getAttribute('data-index');
        $(modal_btn_multi).removeClass('modalscale');
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
    };

}
window.onload = function () {
    setDataIndex();
};
window.onclick = function (event) {
    if (event.target === modalparent[event.target.getAttribute('data-index')]) {
        modalparent[event.target.getAttribute('data-index')].style.display = "none";
        $(modal_btn_multi).removeClass('modalscale');
    }
};
// Animations
// SCROLL UP ANIMATION__________________________________________________________________
jQuery(document).ready(function ($) {
    let revealClass = '.animated';
    let targetClass = '.has-scroll-reveal:not(' + revealClass + ')';
    let offset = 100; // Offset from bottom of viewport in pixels.
    let winHeight = $(window).height();
    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function () {
        winHeight = $(window).height();
    });
    // Fire when page loads
    triggerAnimation(revealClass, targetClass, offset, winHeight);
    // Also fire on scroll
    $(window).on('scroll', function () {
        triggerAnimation(revealClass, targetClass, offset, winHeight);
    }); // window.on('scroll')
}); // document.ready
function triggerAnimation(revealClass, targetClass, offset, winHeight) {
    // Get current scrollPos
    let trigger = $(window).scrollTop() + winHeight - offset;
    // Loop through elements we're affecting
    $(targetClass).each(function () {
        let elementOffset = $(this).offset().top;
        if (elementOffset < trigger) {
            $(this).addClass(revealClass.replace('.', ''));
        }
    });
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS