Help with integrating html & css

HTML & CSS
1

I have this code where the text appears on top of (layered over) an image (image as background), successfully:

    <div class="col-md-12">
        <div class="top-video">
            <div class="row">
                <div class="pt_featured_video" style="width:100%;">

                <h3>&nbsp; TEXT TEXT
              <p class="text1">&nbsp;&nbsp;TEXT TEXT</p>
                 &nbsp;TEXT TEXT TEXT</h3>
                    <div class="video-player">
                       <div class="thumbnail_holder">
                       <img src="/images/head.jpg"></div>
	 </div>
                </div>
            </div>
           </div>

I am trying to replace it with this html (working) animation:

<div class="animate six" style="width:100%;">
		<span>t</span><span>e</span><span>x</span>
		<span>t</span><span>e</span><span>x</span><span>t</span>
		<p class="text">&nbsp;&nbsp;TEXT-TEXT</p>
		<span>t</span><span>e</span><span>x</span><span>t</span><span>t</span><span>e</span><span>x</span>
		<span>t</span><span>t</span><span>e</span>
		<span>x</span><span>t</span><span>.</span>
		</div>

but, it always appears above the image, not layered on top of the image (image as background), like the non-animation code.

Here is the relevant animation css:

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
*
{
margin: 0;
}

.animate {
font-size: 30px;
margin: 50px 0 0;
font-family: arial, sans-serif;
color: #ffffff;
word-wrap:break-word;
padding: 30px;
}

	.animate span {
		display: inline-block;
	}

	.six span {
	color: #ffffff;
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .7s forwards;
	}

	@keyframes twister {
		10% {
		opacity: 1;
		}
		100% {
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
	}

any suggestions/ guidance will be appreciated.

2

If the image is purely a background image, then set it as such in the CSS; don’t include it as content in the HTML.

4

Thanks for your reply.

Regarding image as background, it is a video web script that has an image on the page as this:

<div class="video-player">
 <div class="thumbnail_holder">
<img src="/images/head.jpg"></div>
   </div>
 </div>

but, I have resolved that issue, thanks.

5

Regarding that animation code, which works successfully now, (thanks for all help).
It displays the animation currently upon each page refresh. I’m curious what it would take to just show the text on the page (without the animation twisting, rotating, etc.) once the web page visitor logs in?

6

Assuming there’s a class on the page that identifies the visitor as logged in you could either use that class in conjunction with the current styles to negate the animation (animation:none) and then set the final states of the property as shown in the 100% of your keyframe.

Or you could again use the logged in class with the current styles and set the animation duration to zero so that it happens immediately.

e.g.

.logged-in .six span{animation: twister 0s forwards;}

7

Thanks for your reply.

The web script that I’m using and modifying is templated(for lack of a better word) with html files separate from php files. The animation code is in an html file with no class in that file that identified the user as logged in. However, the script has a php file in the folder named ‘login’, which begins with:

<?php
if (IS_LOGGED == true) {
	header("Location: " . PT_Link(''));
	exit();
}

so, I added this to the html page, as an attempt, with no success (as in, the html page no longer displays):

<?php
if (IS_LOGGED == true) {
.six span{animation: twister 0s forwards;
}
?>

Any additional guidance will be appreciated

8

I don’t do php and don’t know how you output code into the current page but CSS would need to be in style tags as per usual if you were writing into the head.

<style>
css goes here as per usual ....
</style>

You need to ask that question in the PHP forum :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.