Home » Photographer Portfolio Website Landing Page Design, Fade Image On Hover Effect

Photographer Portfolio Website Landing Page Design, Fade Image On Hover Effect

by admin
Photographer website landing page design

If you want to download the source code then click here

Hello friends, in this article i’m showing to photographer, model, and artist website landing page design, hero section or banner section. when you just hover over the link which is i’ve list the models name to show/fade image full screen, also the model name is display for big letters in bottom right hand side and hover out the link(you leave the mouse course to particuller link or model name) to hide the corresponding image and defualt background image is show automatically, so that is the whole functionality of the landing page, also i’ve added the video tutorial of this video for our learndesign youtube channel must visit at once.

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Photography Folio Website Design</title>
	<!-- Google fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
		/* Your style write here */

<!-- HTML code goes here -->

<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

Basic structure of HTML But I have attached the necessary links in it like Google fonts, jquery, gsap greensock, lettering js, all these links I have attached.

	<section class="hero_sec">
		<ul class="item_name">
			<li><a href="item1" class="item">Jane Cooper</a></li>
			<li><a href="item2" class="item">Arlene Mccoy</a></li>
			<li><a href="item3" class="item">Wade Warren</a></li>
			<li><a href="item4" class="item">Kathryn Murphy</a></li>
			<li><a href="item5" class="item">Floyd Miles</a></li>
			<li><a href="item6" class="item">Bessie Cooper</a></li>
			<li><a href="item7" class="item">Ronald Richards</a></li>
			<li><a href="item8" class="item">Leslie Alexander</a></li>
			<li><a href="item9" class="item">Ralph Edwards</a></li>
		<div class="item_image">
			<div id="item1" class="img">
				<img src="images/img1.jpg" alt="">
				<div class="item_image_text">
					<h3>Jane &nbsp;Cooper</h3>
			<div id="item2" class="img">
				<img src="images/img2.jpg" alt="">
				<div class="item_image_text">
					<h3>Arlene &nbsp;Mccoy</h3>
			<div id="item3" class="img">
				<img src="images/img3.jpg" alt="">
				<div class="item_image_text">
					<h3>Wade &nbsp;Warren</h3>
			<div id="item4" class="img">
				<img src="images/img4.jpg" alt="">
				<div class="item_image_text">
					<h3>Kathryn &nbsp;Murphy</h3>
			<div id="item5" class="img">
				<img src="images/img5.jpg" alt="">
				<div class="item_image_text">
					<h3>Floyd &nbsp;Miles</h3>
			<div id="item6" class="img">
				<img src="images/img6.jpg" alt="">
				<div class="item_image_text">
					<h3>Bessie &nbsp;Cooper</h3>
			<div id="item7" class="img">
				<img src="images/img7.jpg" alt="">
				<div class="item_image_text">
					<h3>Ronald &nbsp;Richards</h3>
			<div id="item8" class="img">
				<img src="images/img8.jpg" alt="">
				<div class="item_image_text">
					<h3>Leslie &nbsp;Alexander</h3>
			<div id="item9" class="img">
				<img src="images/img9.jpg" alt="">
				<div class="item_image_text">
					<h3>Ralph &nbsp;Edwards</h3>

Above I have added the structure of HTML. first, you will see the main div tag, inside the section tag the class name is hero_sec. inside the first HTML code is the menu item for the model link list which is using a ul(unordered list) li(list item) HTML tag and anchor link the href is item1, item2, item3, etc., and the anchor tag class name is item. second preference is item image group. inside the item image, total 9 model i’ve listed so i create a 9 div groups. i define a name and id both, id’s item1, item2, item3 same a menu anchore href value, then class name is img. then another div i have of item_image_text inside the h3 tag for using model name. so that’s the whole structure of HTML. 

Below I have placed a link to more useful videos, which you will get to learn a lot from them, then you guys must watch them and if you like them, then definitely visit our learndesign youtube channel.


		$(".item_image_text h3").lettering();

		$(".item_image_text h3 span").css("opacity", "0");
		$(".item_image .img").hide().removeClass("imgActive");

		// hover condition
		$(".item_name li a").hover(function(){

			// if

			$(".item_name li a").removeClass("active");

			var activeLinkId = $(this).attr("href");

			$(".item_image .img").hide().removeClass("imgActive");
			$(".item_image .img#"+activeLinkId).show().addClass("imgActive");

			$(".item_image_text h3 span").css("opacity", "1");

			// gsap animation
			var tl = gsap.timeline();

			tl.from(".img.imgActive .item_image_text h3 span", {
				y: 30,
				x: 50,
				opacity: 0,
				stagger: .1

		}, function(){

			// else

As you can see from the above code, first you’ll see the lettering plugin call, because we need a every word in separate in specific span for the lettering animation. the next is default setting of css opacity 0 and imgActive class remove. after that create a hover function, inside the function adding all the hovering functionality and also added the gsap code for lettering animation, you can see above the code.  

			margin: 0;
			padding: 0;
			box-sizing: border-box;
			outline: none;
			font-family: 'Italiana', serif;
			background-color: #000000;
			overflow-x: hidden;
			list-style: none;
			text-decoration: none;
			color: inherit;
			position: absolute;
			left: 100px;
			top: 100px;
			z-index: 99;
		.item_name a{
			color: #fff;
			font-size: 36px;
			line-height: 66px;
			font-weight: normal;
			opacity: 0.3;
			transition: all ease 0.5s;
		.item_name a:hover{
			opacity: 1;
		.item_name a.active{
			opacity: 1;
			cursor: pointer;

		.item_image .img.imgActive img{
			animation: imgActive 2.4s ease 0s;
		@keyframes imgActive {
				opacity: 0;
				transform: translateY(-100px);
			position: absolute;
			bottom: 60px;
			right: 60px;
		.item_image_text h3{
			color: #fff;
			font-size: 88px;
		.item_image_text h3 span{
			display: inline-table;

Above I have added the css code you can copy that code and put your index.html file inside style tag or separete .style.css file. first you’ll see the normalize css for document and body, image active class css for smooth image showing using css keyframe property, and last is image text style for bigger font. that’s the overall design style structure.

I hope you enjoyed this tutorial and you must have got to learn something new. So you must share it and subscribe to my LearnDesign youtube channel so that you can get the updates of my upcoming videos. thanks for your time.

Related Articles