Grid Over an Image with Clickable Elements // CSS Grid
How do I make an grid over an image with clickable elements // css grid?
What is a grid over an image with clickable elements // css grid? How do you make a grid over an image with clickable elements // css grid? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.
Grid Over an Image with Clickable Elements // CSS Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Over an Image with Clickable Elements // CSS Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Abel|Roboto" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <div class="grid-wrapper"> <div class="question-wrapper question1"> <div class="question-trigger"> <p href="#question1" data-tab="question1"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> </div> <div class="question" id="question1"> <div class="question-close"> <p> <a href=""><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> <h3 class="question-heading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, illum.</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maxime quis fugiat eum eligendi itaque vitae nemo voluptatibus velit. Accusantium!</p> </div> </div> <div class="question-wrapper question2"> <div class="question-trigger"> <p href="#question2" data-tab="question2"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> </div> <div class="question" id="question2"> <div class="question-close"> <p> <a href=""><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> <h3 class="question-heading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, illum.</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maxime quis fugiat eum eligendi itaque vitae nemo voluptatibus velit. Accusantium!</p> </div> </div> <div class="question-wrapper question3"> <div class="question-trigger"> <p href="#question3" data-tab="question3"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p> </div> <div class="question" id="question3"> <div class="question-close"> <p> <a href=""><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> <h3 class="question-heading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, illum.</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maxime quis fugiat eum eligendi itaque vitae nemo voluptatibus velit. Accusantium!</p> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Grid Over an Image with Clickable Elements // CSS Grid - Script Codes CSS Codes
body { position: relative; margin: 0; font-family: "Roboto", sans-serif; color: #444;
}
.wrapper { position: relative; background-image: url(https://images.unsplash.com/photo-1464305795204-6f5bbfc7fb81); background-size: cover; background-position: center; height: 100vh;
}
.grid-wrapper { display: grid; grid-template-columns: repeat(6, 300px 300px 300px 1fr 1fr 300px); grid-template-rows: repeat(4, 300px 1fr 300px 300px); height: 100vh; padding: 20px;
}
.question-wrapper { position: relative;
}
.question-trigger { position: absolute; z-index: 1; font-size: 1.5em; color: red; cursor: pointer;
}
.question-close { text-align: right; font-size: 1.2em;
}
.question-close p { margin: 0;
}
.question-close a { color: #ccc;
}
.question-close a:hover { color: #aaa;
}
.question { display: none; position: relative; background: white; height: 300px; width: 300px; padding: 10px; border-radius: 10px; z-index: 10;
}
.question-heading { font-family: "Abel", sans-serif;
}
.question1 { grid-column: 1; grid-row: 1;
}
.question2 { grid-column: 2; grid-row: 3;
}
.question3 { grid-column: 5; grid-row: 4;
}
Grid Over an Image with Clickable Elements // CSS Grid - Script Codes JS Codes
$('.question-trigger p').on('click', function() { var triggerID = $(this).attr('data-tab'); $('.question').hide(); $('#' + triggerID).show();
});
$('.question-close').on('click', function(e) { e.preventDefault(); $('.question').hide();
});
Developer | Brian Haferkamp |
Username | brianhaferkamp |
Uploaded | October 10, 2022 |
Rating | 3 |
Size | 3,541 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Gradient Transitions Between Sections | 3,329 Kb |
RADIOLOGY | 2,751 Kb |
System Fonts Can Be Beautiful | 7,239 Kb |
Brutal, Bro | 6,575 Kb |
Travel Blog Design with Sticky Nav and Sidebar | 8,383 Kb |
Full-Width Hero with Image Using Flexbox | 2,459 Kb |
Brutalism Web Design School | 7,231 Kb |
Follow Your Heart | 4,964 Kb |
2-Up Magazine Layout | 8,250 Kb |
Creating a CSS Flexbox Grid | 2,022 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
3d css cube | Semenchenko | 4,578 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
React Template | Isac | 1,241 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!