Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html

https://i.stack.imgur.com/rxYRS.png

I want to be able to click on an image and add the description of my choice. Right now, it is showing something else:

https://i.stack.imgur.com/zUCRH.png

Here is a snippet of the code related to this:

Thank you for your assistance!

<!-- item -->
                <div class="project-item">
                    <!-- ==> Put your thumbnail as a background -->
                    <a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
                        <!-- project-description -->
                        <div class="project-description-wrapper">
                            <div class="project-description">
                                <!-- project name -->
                                <h2 class="project-title">Project Title</h2>
                                <!-- /project name -->
                                <span class="see-more">Project Tags</span>
                            </div>
                        </div>
                        <!-- /project-description -->
                    </a>
                </div>          
                <!-- /item -->
csshtmlproject

Answer №1

If you're not sure what framework to use for creating a website, I highly recommend checking out MaterializeCSS. They have options that can perfectly match your needs.

Take a look:

<!-- MATERIAL BOXED-->
        <h1>MATERIAL BOXED</h1>

        <img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">

All you need to do is import the Materialize library and jQuery into your code, which you can find on their official page.

I hope this solution helps you with your project. It may seem unconventional, but it's effective and looks great in action! ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

javascriptjqueryhtmliframe

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

javascriptjqueryhtmlcss

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

jquerycssajaxappendslideup

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

javascripthtmlreactjsjsx

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

javahtmlseleniumselenium-webdriver

What is the process for creating a login page that redirects automatically?

For instance: Whenever I enter gmail.com, it automatically takes me to this link: https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmp ...

javascriptphphtmlhttp-redirect

Tips for incorporating a value within the AngularJS select function

Having an issue with passing a list value in the html select method using AngularJS. Here is my code: app.js $scope.subcategory = function() { var query = "SELECT unit FROM Length;"; $cordovaSQLite.execute(db, query).then(function(res) { ...

javascripthtmlangularjs

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

javascripthtmlcss

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

Guide on making a flowchart using CSS

I'm working on creating a CSS flow chart diagram and I've included an image below for reference. Might there be a straightforward method to achieve this? I've been scouring the web for examples, but I'm unsure of what terminology to use ...

htmlcss

Retrieve data from multiple inputs with the same name in a Spring MVC form

I have a JSP page with input fields that can be dynamically added or removed. I need to map these input fields to the @ModelAttributes in Spring MVC, but I'm unsure of how to do this. I want to submit a form that includes: <form enctype="multipar ...

javahtmlspringformsjsp

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

csslayouthtmlcss-floatcentering

Unable to extract property from object in context due to its undefined status

Having trouble with the useContext hook in my React app for managing the cart state. Keep getting an error stating that the function I'm trying to destructure is undefined. I'm new to using the context API and have tried various solutions like e ...

javascripthtmlreactjsreact-hooks

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

javascripthtmljquerycssbootstrap-4

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this: First, I tried adding the attribute slideActiveClass="sw ...

cssnext.jsslidercarouselswiper.js