How can I incorporate animated text onto these images by simply hovering my cursor over them, while still maintaining the current style?

.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery img {
  width: 100%;
}

.gallery h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}

.gallery h2:before,
.gallery h2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.gallery h2:after {
  --direction: right;
}
<section class="gallery">
  <h2>Instant Grams</h2>
  <img src="https://source.unsplash.com/random/201x201" alt="">
  <img src="https://source.unsplash.com/random/202x202" alt="">
  <img src="https://source.unsplash.com/random/203x203" alt="">
  <img src="https://source.unsplash.com/random/204x204" alt="">
</section>

When a user hovers over an image in my gallery, I want a friendly greeting message to appear. Existing solutions I've found online have altered my component's style, which uses a Grid layout. How can I implement animated text that maintains my current design when a user hovers over an image?

htmlcsshtml5-canvascss-transitions

Answer №1

To create a cool effect, you can make the text color transparent and then change it to a solid color when hovering over it. Here's an example:

* {
  margin: 0;
  padding: 0;
}

p {
  height: 300px;
  width: 300px;
  color: transparent;
  transition: all 1s;
}

p:hover {
  color: #000;
  background: #00d5ff;
}
<h3>Hover below</h3>

<p>Hello</p>

If you want to apply this concept to images, you can position text on top of an image and make it transparent. Then, on hover, reveal the text with a color overlay and darken the image for a stylish effect. Here's how you can achieve that:

/* Gallery */

.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}
.gallery h2:before,
.gallery h2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.gallery h2:after {
  --direction: right;
}

/* Image Boxes */

.gallery-item {
  position: relative;
  color: transparent;
  transition: all .5s;
  margin: 0;
  padding: 0;
  width: 100%;
}

.gallery-item:hover {
  color: #fff;
  filter: brightness(90%);
  cursor: pointer;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  width: 100%;
}
<section class="gallery">

<h2>Instant Grams</h2>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/200x200" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/201x201" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/202x202" alt="">
  <div class="text">Some text...</div>
</div>

<div class="gallery-item">
  <img src="https://source.unsplash.com/random/203x203" alt="">
  <div class="text">Some text...</div>
</div>
</section>

Answer №2

Is this what you're looking for?

.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery img {
  width: 100%;
}

.gallery h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  align-items: center;
}

.gallery h2:before,
.gallery h2:after {
  display: block;
  content: '';
  height: 10px;
  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);
}

.gallery h2:after {
  --direction: right;
}
.gallery-item {
  position: relative;
}
.gallery-item:hover {
  cursor: pointer;
}
.greeting {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  color: red;
  font-weight: bold;
  font-size: 30px;
  opacity: 0;
  transition: opacity .5s;
}
.gallery-item:hover .greeting {
  opacity: 1;
}
<section class="gallery">
  <h2>Instant Grams</h2>
  <div class="gallery-item">
    <img src="https://source.unsplash.com/random/201x201" alt="">
    <div class="greeting">Hello 1</div>
  </div>
  <div class="gallery-item">
    <img src="https://source.unsplash.com/random/202x202" alt="">
    <div class="greeting">Hello 2</div>
  </div>
  <div class="gallery-item">
    <img src="https://source.unsplash.com/random/203x203" alt="">
    <div class="greeting">Hello 3</div>
  </div>
  <div class="gallery-item">
    <img src="https://source.unsplash.com/random/204x204" alt="">
    <div class="greeting">Hello 4</div>
  </div>
</section>

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

Adding an additional icon to the collapsible header in jQuery Mobile

Is it possible to add an additional icon from fontawesome to the right side of a collapsible header in jQuery Mobile, in addition to the default one on the left? For example: In this scenario, the default icon would be on the left of "Madrid," and on the ...

javascriptjqueryhtmlcssjquery-mobile

What methods can I employ in CSS to adjust my grid template to fit within a column?

My CSS code defines how images appear on my website. Below is my HTML code which displays a list of cars but also includes a component called Car with additional code. <section className="Carslist"> <div className="Carslist-center"> ...

cssreactjs

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

I'm encountering an issue with a page that has a width exceeding 100% (2000px). Whenever I click to display a dialog from a button located at the end of the horizontal page, the window automatically scrolls back to the beginning of the page before sho ...

javascripthtmlcssangularjsangular-material

What caused the submit button to suddenly change colors in such a peculiar manner?

In its natural state, the submit button appears in the default color, lacking any specific style when viewed in Chrome. Once the CSS rule input[type="submit"]{border-radius: 2px;} is applied, the button transforms, suddenly changing color and showing a sh ...

htmlcss

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

htmlimage

A guide to positioning images and ads next to each other with CSS and HTML

Snippet of HTML Code: <div class="goleft"> AD 300x250 size </div> <div class="itemImageBlock goleft"> <span class="itemImage"> <img src="/media/k2/items/cache/c3997142576e6f4d163ead570965 ...

htmlcss

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

javascriptjqueryhtml

Creating a smooth transition between two distinct colors in separate categories

Can someone assist me in creating a gradual transition between two distinct colors by utilizing SASS and the color functions that are available? Given a starting color, such as #f1a100, and an ending color, #2ec3fb, how can I generate multiple classes tha ...

csscolorssass

Django Preload: Selective Loading of Images

I am currently working on a BlogApp and my goal is to have the Image Page load only a limited number of images when opened. My objective: I aim to Load only 9 images from the Server. Specifically, I want to display a few images at first when the user ope ...

pythonhtmldjango

Spinning a hidden overlay image with CSS

I'm facing a challenge with my mask-image in CSS. I have successfully positioned it using the mask-position property, but I can't seem to figure out how to rotate it without rotating the entire element. Can anyone provide insight on how to achiev ...

htmlcss

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

Navigating and Organizing in Ionic Service Factory

Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...

javascripthtmlangularjsionic-framework

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

javascriptcssreactjs

Tips for creating a mandatory textarea input field

It's pretty straightforward - I have a textarea that is set to required, but it only alerts the user if you actually click inside the text area. If you try to submit without clicking inside, it won't prompt the alert. Take a look at this Fiddle ...

javascriptjqueryhtml

Implementing a JavaScript function to trigger the 'GET' method upon page load repeatedly

I am facing a strange issue where a javascript function is running multiple times upon page load (7 times in Chrome, 3 times in IE, 7 times in Firefox, 6 times in Opera, 4 times in Safari, and 4 times in Edge). What's going on??? Moreover, the xmlHtt ...

javascripthtml

Setting the home page in a new Angular project: a comprehensive guide

Just starting out with Angular and need some help! I followed the instructions on to create a new project. The home page is currently displayed from appcomponent.html I added a new page in SRC >> pages >> index.html and index.ts To include ...

htmlangulartypescript

Tips for showcasing my website metatags effectively for SEO purposes

I've encountered an issue, After updating my website across all search engines, I noticed that it is displaying my web hosting metatags instead of my own. For example: Domain Default page Welcome to Parallels! If you are seeing this message, the we ...

html

Having trouble retrieving the accurate count of buttons with a particular class identifier

I have a task where I need to count the number of buttons within a dynamically created div using JavaScript. The buttons are added from a separate JS file and when I view the code in the browser's inspection tool, everything appears to be correct. How ...

javascripthtml

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

cssrubynokogiri

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video