delay-transition opacity of text

I am struggling with creating a hover effect on a div with an image inside.

My goal is to increase the size of the image on hover and display some text next to the div once the transition is complete.

I have tried various methods, but none seem to work. Here is my latest attempt:

.width-12 {
  width: 100%;
  height: 100%;
}
.change-hover {
    width: 10%;
    transition: all 1s;
    float: left;
}

.show-hover {
    display: none;
    text-align: left;
    opacity: 0;
    transition: opacity 0s;
}

.discover-no-hover:hover .change-hover {
    width: 24%;
    float: left;
}

.discover-no-hover:hover .show-hover {
    display: block;
    opacity: 1;
    transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
                    <div class="box small bkg-white">
                        <div class="feature-column medium mb-50 center hover-align">
                            <div class="iconcool">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg"
                                     alt="" class="img-responsive change-hover">
                            </div>
                            <div class="show-hover">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
                            </div>
                        </div>
                    </div>
                </div>

JSfiddle for those who don't like the snippet

I need help in making the text only appear after the image has finished growing. How can I achieve this within the transition duration? Thank you!

htmlcssdelaytransitionopacity

Answer №1

You have successfully hidden the element using CSS properties.

Simply update the transition property as follows:

transition: 0s opacity 1s;

.width-12 {
  width: 100%;
  height: 100%;
}

.change-hover {
  width: 10%;
  transition: all 1s;
  float: left;
}

.show-hover {
  display: block;
  text-align: left;
  opacity: 0;
  transition: 0s opacity 1s;
}

.discover-no-hover:hover .change-hover {
  width: 24%;
  float: left;
}

.discover-no-hover:hover .show-hover {
  display: block;
  opacity: 1;
  transition-delay: 1s;
}
<div class="width-12 discover-no-hover">
  <div class="box small bkg-white">
    <div class="feature-column medium mb-50 center hover-align">
      <div class="iconcool">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover">
      </div>
      <div class="show-hover">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis.
        Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante.
      </div>
    </div>
  </div>
</div>

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

MudGrid: Ensuring precise vertical cell alignment

I'm a newcomer to MudBlazor and struggling with a basic task. My goal is to create a structured layout resembling a table with a fixed number of cells, like this: Mountains 5 Lakes 3 The names on the left should be regular size while the numbers ...

cssmudblazor

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css

annoying box filled with information

Take a look at my http://jsfiddle.net/8wSzk/2/ <div class="row1"> <div> <div class="circle-menu"> </div> <p> some option </p> </div> <div> <div class="circle-menu"> </div> ...

htmlcss

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

javascripthtmlangularjsradio-button

"Enhance your date input with igx-date-picker for seamless date

I can't seem to get my Angular template with the IgxDatePickerComponent to display dates in a UK format. The issue is with formatting the date for both the drop-down part of the control and the input part. Below is the code snippet for the control: ...

htmlangulartypescriptdatepickerangular-template

Creating a sort button in HTML that can efficiently sort various divs within a table is a useful tool for enhancing user experience

My HTML table is populated with various <td> elements. How can I arrange these divs based on IMDb rating, TomatoMeter, etc... [ CSS code is not provided below ] <table> <tr class="row"> <td class="column"> <br> ...

javascripthtmlcsssortinghtml-table

How can I keep a div open when the mouse hovers over it, and then close it when the mouse

My current markup looks like this: <div class="wrapper-header"> <div class="container"> <div class="navbar"> <ul class="nav navbar-nav"> <li class=""><a href="#" class="toggle">Show Categories</a></li> </ ...

javascriptjquerycss

Position CSS triangles for active hyperlinks

I'm having trouble creating a triangle for hover-over links, as the triangle always shows up in one corner instead of below the links. Can anyone help me pinpoint the exact issue? Fiddle #navcontainer a:hover::after { background: white; ...

htmlcsshtml-lists

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...

javascriptphphtmlcssjquery-isotope

Issues with webpage not loading properly from the header section

I wanted to draw your attention to this page and its source code, which can be found here: The web page is not displaying from the very top, as there seems to be a gap of about 10px from the top of the browser. In the image above, I have highlighted the ...

phphtmlcss

What are the advantages of using classes versus ids for managing multiple li elements in example 20 with knockout and jQuery? Is one option more efficient and easier to maintain

<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}"> <li><span class="buyerprocess-sprite seller-name"></span> <p class="leftfloat"> <span data-bind=" ...

javascriptjquerycssknockout.jsknockout-2.0

What's the reason for text-alignment not functioning properly?

After some testing, I have come up with the following code: .Greetings { width:100%; display:block; text-align:center; font-family: "Times New Roman", Times, serif; font-size:75px; color:#208CB7; } The objective was to center the text on the ...

javascripthtmlcssweb

Uninterrupted Horizontal Text Scrolling using Pure CSS

I am currently working on developing a news ticker that displays horizontal text in a continuous scrolling manner, without any breaks between loops. While I hope to achieve this using only CSS and HTML, I'm unsure if it's feasible. Here is my ini ...

htmlcss

Tips for beginners on determining the best placement for CSS properties on a webpage

As a newcomer to CSS, I have encountered some issues when working with properties in different sections of code. For example: P1: Please review the implementation of #menu and #menu a. The code can be found here. P2: Also, take a look at #menu a specific ...

htmlcsswebtypesetting

Discover the steps to integrating jsfiddle into my local development environment

If you want to check out the code for this example, head over to jsfiddle at this link. And below is a snippet of the HTML file: <!DOCTYPE html> <html> <head> <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type= ...

javascriptjqueryhtmlcss

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

Guide to update the source of several images simultaneously based on the chosen list item

My website includes a variety of images and thumbnails showcasing a car in different colors. There are four color options available, along with a selection list to choose a color. I would like the ability to switch between colors in the list and have 4 out ...

javascriptjqueryhtml

The beauty of Android Studio: Gradients

While working on my Android Studio project, I designed a UI in Figma that included a rectangle with multiple gradients and a solid color. Now I'm wondering how to recreate this exact rectangle in Android Studio. Here is the CSS code for reference: ba ...

javaandroidcssxml

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

javascripthtml

Utilize DELETE and POST functionalities within a single form

Is it possible to include both a POST and DELETE request within the same form tags? I have a table and I want to be able to delete a row when it is selected. I have tried to make it work for both but I can only get one to function. My backend is built on ...

htmlnode.jsexpress