Webkit-transition questions

HTML & CSS
1

Hello all. To us yankees…happy fourth, be mindful not to loose a finger or two, keep the pets inside. To everyone else, have an awesome day as well.
Onto the transition thing now.

On this page:
http://www.danielamorescalchi.com/coreCorp/index.php
I set up the first image to change when the user hovers over it. great…works. however the bottom image doesn’t’ resize.
Any advice on how to affect the size of both images as the broweser re-adjusts in size.
on this other page
http://www.danielamorescalchi.com/coreCorp/staffing.php
I have a thin animated line at the top I am testing out. of course it is fine in chrome. but it gives me scroll bar in ff & nothing at all in IE.
The vendor prefixes are in…
How can i fix this. Any suggestions please?
Thx
d

2

I don’t understand what you mean by that.

But make sure to optimize your large background images. They are gigantic files, which isn’t viable on the web. Use the Photoshop Save for Web option to reduce them to about 150 kb.

3

Hello Ralph, i mean the first image w/the oil platform. if you hover over it changes. but when you resize the browser you’ll see the second image remain the same size and the both are then visible.
Yes on the bg large sizes. Was actually wondering about preloading, but will try to re size & not loose the quality.

4

Try giving the <a> container position: relative;

5

Genius! Ralph great suggestion, i had tried the containing div but not the a property.
At first it re sized to a tiny bit but i used:

.imgCtr{
display:block;
position:relative;
padding-bottom:225px;
}

the display:block did the trick.
bottom margin/padding not kicking in which is interesting.
this also works on the span w/the text that I added. but not if I stretch the browser way out…or way in.
currenlty I set the size of the span to 100% you think setting a size would work better?
thx
D

6

wondering if I should just use an image for the title as well. but it’d be a lot neater to use css…

7

additionally:
for the middle image I wanted to try and add more animation on hover: This is what I shot for, and so far it hasn’t worked so looking for answers.
in the html i have:

<div id="staffSpan" class="span3">
				<a class="aImg" href="staffing.php">
				<img class="img-btm" src="animate/bp01.jpg" alt="staffing">
				<img class="img-top" src="animate/bp02.jpg" alt="staffing">
				<span>Staffing</span>
				<div class="txtBox">
					<ul class="unstyled inline">
					<li class="box1">text here</li>
					<li class="box2">other text here</li>
					<li></li>
					</ul>
				</div>
				</a>
			</div>

in the css:

.txtBox{
visibility:hidden;
width:1000px;
height:250px;
color:#fff;
background:#000;
position:absolute;
top:0;
left:-100;
}
.txtBox:hover{
visibility:visible;
}
.box01{
display:block;
width:500px;
height:250px;
}
.box02{
width:500px;
height:250px;
}

so why isn’t it kicking in?

8

Try opacity instead of visibility… and cross your fingers. :stuck_out_tongue:

or maybe:


a:hover .txtBox {
    visibility:visible;
    cursor:pointer;
}

FYI: .box01 -vs- class=“box1”

9

awesome! that did the trick. And I changed the z-index so now it shows up on top.
Could you advise on how to position it?
I tried giving it a top & left property (also tried at ul & li level) didn’t work. currently chrome says they are “invalid property values” but I can’t see where else they’d go.
also on of the probs is that when I hover over the tech image i get the text boxes.
On the other hand…crap…now I get an horizontal scroll bar…

10

I’m not following along very well. There seem to be two issues being discussed and two different test pages.

Regarding the error message with the <ul>:


<span class="txtBox">
    <ul class="unstyled inline">
        <li class="box01"><a href="#">text here</a></li>
        <li class="box02"><a href="#">other text here</a></li>
        <li></li>
    </ul>
</span>

According to Firebug, the <ul> is not allowed inside the <span>. The reason is of course that block elements such as the <ul> are not allowed inside of an inline element, such as the <span>. You could probably change the <span> to a <div> and style the <div> as needed.

The other questions I’m unclear about. What needs to be positioned?

11

The other two Validator issues:

Similar to the preceeding issue… you can use a <span> tag inside the <h3> tag, but not a <div> inside the <h3> tag.
(line 113)


<h3 class="footToggle"><div class="upArrow"></div></h3>

The </body> tag should be placed just above the </html> tag. The scripts should preceed the </body> tag.


[color=red][s]</body>[/s][/color]
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/cdiJs.js"></script>
[color=blue]</body>[/color]
</html>
12

Done. Ronpat thank you for the clear explanation as why the span would not work w/a ul. Will take care of the other issues as well.
As for clarifying.
when i hover over staffing i’d like for those two boxes (that will hopfully be soon styled and more attractivly animated)
to show up on top and centered over the staffing image.
Right now regardless of me giving the .txtBox an absolute position it is stuck to the left side of the image.
Also a bit problematic is that if i hover over the tech image for example the boxes display (understandable due to their size).
So I was wondering how to fix that.
(do have another question about the animation but not to muddle the waters will post a new one)
Thank you.
D

13

all right! yey…high five. solved the positioning, but only on local & chrome?!? wtf???
If there is a better solution let me know.
but here it is in case it helps anyone else:

[COLOR="#800000"].txtBox{
opacity:0;
width:100%;
line-height:150px;
color:#fff;
position:absolute;
left:500px;
top:600px;
}[/COLOR]
.txtBox:hover{
opacity:1;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
z-index:1000;
}

set the text box to absolute. Could have sworn I tried it last night.
however would the

{display:none;}

property be better than opacity. that whey when it is not hovered over it would not interfere w/the user hovering over the two other images?

14

opacity:0 makes the object invisible and preserves the space on the page; the object continues to respond to :hover.

visiblilty:hidden makes the object invisible and preserves the space on the page, but the object does not respond to :hover.

display:none makes the object invisible by removing it from the page entirely.

Pick the one that suits your design. :stuck_out_tongue:

Ron

15

Hi ronpat, saw that as well on http://www.w3schools.com/css/css_display_visibility.asp
And now trying it out on http://www.danielamorescalchi.com/coreCorp/staffing.php
but what is the opposite of display:none?
display:show, display:visible, display:for the love of ceiling cat show up already?

I tried this so far. I have taken out the div but would like to show up when I hover over the appropriate link.

#showLeft{
display:hidden;
width:350px;
height:250px;
position:absolute;
background:url('imgs/xParentFtr.png');
top:250px;
left:-300px;
z-index:100000;
}


#link1:hover #showLeft{
display:show;
}
16

The opposite of display:none is display:box-type, where box-type is [block|inline-block|table|etc…]

For a full list, see:

http://reference.sitepoint.com/css/display

I’ll guess that #showLeft is a block object, so {display:block} will bring it back to life.

17

tried it. didn’t work…

18

You cannot :hover over an object with the property {display:none} because it isn’t there. That’s why I suggested opacity as a possibility.

I’m having a problem visualizing what you are trying to achieve. What is supposed to trigger what. Would you mind describing again how the objects are supposed to work on the page?

19

Sure thank you Ronpat.
I’d want to add more animation to the page. both on the main and staffing page.
so when the user hover over an image a div displays animation w/content.
on the index page both boxes w/the content should show at once. on the staffing page the display based on which half of the image the user hovers over.
I want to use positioned divs as I want the effects and animation to be larger than the original image. I don’t just want a roll over.