Using CSS to present text following the header's upload

In my form, I have three fields: name, designation, and description. Currently, all three are displayed at once. However, I want to first display name and designation, then later show the description after some time.

<div class="teamspage4">
    <img src="<?php echo base_url();?>admin/images/blogimages/<?php echo $r->image_path;?>" class="img-responsive teamimage"/>          
    <div class="teamspage5"><?php echo $r->name;?></div>
    <div class="teamspage6"><?php echo $r->designation;?></div>
    <div class="teamspage76"><?php echo $r->description;?></div>
</div>
css

Answer №1

Here is a helpful code snippet for you to try:

.teamspage5{
  opacity:0;
  animation: op 1s ease forwards;
}
.teamspage6{
  opacity:0;
  animation: op 1s ease forwards;
}
.teamspage76{
  opacity:0;
  animation: op 1s ease 1s forwards;
}
@keyframes op{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
<div class="teamspage5">Name</div>
<div class="teamspage6">Designation</div>
<div class="teamspage76">Description</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

Modify the transition and design of two progress bars

I'm having an issue with merging two Bootstrap progress bars into one. Initially, the first progress bar appears when the page loads and hides after data is loaded. At the same time, the second progress bar shows up. However, the transition animation ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position

Revealing elements with AngularJS ng-show directive prior to concealing them

Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS. My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open su ...

javascriptcssangularjstwitter-bootstrap

Illuminate the image upon checking the checkbox, as well as when clicking on the image itself

Issue with Implementation <div> <input type="checkbox" id="check" class="check-with-label" /> <label for="check" class="label-for-check">My Label <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images ...

htmlcsscss-selectors

How can you specify the maximum width and height for a TextField in JavaFX using CSS?

Is there a way to set preferred and maximum width and height for a TextField using CSS? ...

cssjavafx

Bootstrap-enhanced JavaScript table filter functionalities

Hello, I am facing an issue with the table filter functionality. It seems to be working fine, but when I search for a name like "John" and there are multiple instances of "John" in the table, there is some blank space between the tables. I suspect the prob ...

javascriptphphtmlcssbootstrap-4

Troubleshooting complications with Bootstrap V5 Navbar including Nested Dropdowns (Submenu, Multilevel, Megamenu)

I'm currently working on implementing a Nested Navbar Dropdown (Submenu, Multilevel, and Mega Menu). However, I am encountering some challenges related to sizing with max-width and min-width, as well as handling directions with dropstart and dropend b ...

javascripthtmlcsssassbootstrap-5

Arranging two divs side by side using CSS:inline-block

Having some trouble getting two divs with a width of 50% each to appear on the same row. If I adjust the width to 49%, they stack in the same row. Any ideas on what might be causing this issue in the code? I'm more interested in understanding the caus ...

htmlcssresponsive-designcss-position

Guide on executing a function upon clicking the ok button in an alert box in PHP and MySQL

function notify(message) { alert(message); handleAlert(); } function handleAlert() { alert('Alert has been triggered.'); } //I am looking for a way to trigger an update or insert action when the user clicks 'OK' on the alert ...

javascriptphpjquerycssajax

I am experiencing some trouble with configuring the CoreUI Admin Template

I've encountered an issue where I've tried various methods to implement this theme but haven't had any success. 1. I followed the steps in the documentation by cloning the repo of the template and then using npm install (npm run serve) -> ...

csslaravelnpmcore-ui

Using jQuery, encapsulate an image within a div element and transfer the floating style attribute from the image to the div

Can anyone assist me in wrapping an image within a div along with transferring the float setting? This is my current code: $('.photo-img').wrap('<div class="photo-wrap" />'); I would like the new div to inherit the float proper ...

jqueryhtmlcss

Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result. https://i.sstatic.net/pqUtb.png .page{ w ...

cssbox-shadow

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

htmlcssbootstrap-5

Issue with Nivo Lightbox: image not properly centered or resizing correctly

Whenever an image is clicked, it opens in the Nivo lightbox. This feature used to work flawlessly, but recently, it seems to be experiencing issues. The image should be centered and resize responsively to stay in the center. (For example, it worked correct ...

cssresponsive-designlightboxnivo-slider

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

"Varying hues on various displays: Exploring RGB values and CSS for video color

Recently, I designed a webpage with a background-color of #f4afac. The video embedded in this page also features the same background color throughout, creating a seamless blend with no visible edges. On one screen, the colors appear perfectly consistent. ...

csshtmlvideocolors

2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names? For Instance: When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names! <a class="type1" href="#">te ...

htmlcss

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

The children elements in the Flexbox div are not lined up inline with the text

Review the snippet below: div { display: flex; flex: 0 0 45%; max-width: 45%; } <div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut ...

htmlcssflexbox