Applying a CSS3 effect

Hi there,
I have an existing web page layout I'm working on. I have images set in Divs that have been floated from the left in a main container Div so they are inline horizontally.
I have got some CSS3 code to give the images a glass looking border. How do I apply this code? Please assume I'm a beginner, because I pretty much am...
Current code:
<div id="container">
<div id="sixteen" class="equal"><img src="img/thumbs/Lowriders.jpg" alt="" class="levitation_image" /><p>LOWRIDERS<br />___________________________<br /></p><p1>AUGUST 2011</p1></div>
<div id="fifteen" class="equal"><img src="img/thumbs/UK Riots.jpg" alt="" class="levitation_image" /><p>UK RIOTS<br />___________________________<br /></p><p1>AUGUST 2011</p1></div>
<div id="fourteen" class="equal"><img src="img/thumbs/Arnolfini.jpg" alt="" class="levitation_image" /><p>ARNOLFINI<br />___________________________<br /></p><p1>AUGUST 2011</p1></div>
<div id="thirteen" class="equal"><img src="img/thumbs/London 2012 Olympics.jpg" alt="" class="levitation_image" /><p>LONDON 2012 OLYMPICS<br />___________________________<br /></p><p1>AUGUST 2011</p1></div>
</div>
Current CSS:
.equal {
    width: 24%;
    float: left;
    border: 0px black solid;
#container {
    width:1100px;
    margin-right: auto;
          margin-left: auto;
          padding-top: 150px;
          padding-bottom: 230px;
CCS3 Code to implement:
.glass {
          padding: 6px;
          background: #eee;
          background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
          background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          -webkit-box-shadow: 0 0 10px rgba(0,0,0,.7);
          -moz-box-shadow: 0 0 10px rgba(0,0,0,.7);
          box-shadow: 0 0 10px rgba(0,0,0,.7);
.aluminium {
          padding: 5px;
          background: #ccc;
          background: -webkit-gradient(linear, left top, left bottom, from(#ddd), color-stop(0.25, #aaa), to(#8a8a8a));
          background: -moz-linear-gradient(top, #ddd, #aaa 25%, #8a8a8a);
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          border: 1px solid #666;
          -webkit-box-shadow: 0 0 10px rgba(0,0,0,.7);
          -moz-box-shadow: 0 0 10px rgba(0,0,0,.7);
          box-shadow: 0 0 10px rgba(0,0,0,.7);
.transparent {
          padding: 5px;
          background: #555;
          background: rgba(0,0,0,.4);
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          border: 1px solid rgba(0,0,0,0.3);
          -webkit-box-shadow: 0 0 10px rgba(0,0,0,.7);
          -moz-box-shadow: 0 0 10px rgba(0,0,0,.7);
          box-shadow: 0 0 10px rgba(0,0,0,.7);
.red {
          background: #ff5555;
          background: rgba(255,0,0,.4);
.yellow {
          background: #ffff55;
          background: rgba(255,255,0,.4);
.green {
          background: #55ff55;
          background: rgba(0,255,0,.4);
.blue {
          background: #5555ff;
          background: rgba(0,0,255,.4);
My problem is I don't know how to apply the CSS3 code without messing up the float/equal CSS that's already been setup.
Any help would be great! Thanks

Ok excellent.
So if I have the same issue and I want to apply CSS3 animation to the same code where would it go?
Current code:
<div id="container">
<div id="sixteen" class="equal"><img src="img/thumbs/Lowriders.jpg" alt="" class="levitation_image" /></div>
</div>
Current CSS:
.equal {
    width: 24%;
    float: left;
    border: 0px black solid;
#container {
    width:1100px;
    margin-right: auto;
          margin-left: auto;
          padding-top: 150px;
          padding-bottom: 230px;
CCS3 Code to implement:
.hiphop .item {
          width: 150px; /* The width of the items */
          padding-top: 40px; /* The padding to the top; This value should be This value should be equal or bigger then the jump-height (see line 114 and following) */
          padding-bottom: 20px;
          float: left;
.hiphop .item:not(:first-child) {
          padding-left: 50px; /* The distance between the items */
/******************* Styling for the Item Image */
.hiphop .item img.image {
          opacity: 1.0; /* The opacity of the item image when the item is not jumping or dimming */
          -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
          -ms-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
          position: relative;
          z-index: 999;          /* The item image should be above the item image */
          padding-bottom: 20px; /* Some distance to the Item title */
/******************* Styling for the Item Shadow */
.hiphop .item img.shadow {
          top:-29px;          /* This is pulls up the shadow; the value normally is around 1,5 x the height of your shadow image, but depends on where you want to have the shadow */
          opacity: 1.0; /* The opacity of the shadow when the item is not jumping or dimming */
          -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
          -ms-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
          position: relative;
          z-index: 33;          /* The shadow should be above the background, but below the item image */
/******************* Styling for the Item Heading */
.hiphop .item h2 {
          text-align: center; /* Centers the More-Text; If you want the text to be on the left side the value would be "left", if you want the text to be on the right side the value would be "right" */
          opacity: 1.0; /* The opacity of the Heading when the item is not jumping or dimming */
          -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
          -ms-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
/******************* Styling for the More-Text (also could be an image) */
.hiphop .item .more {
          width: inherit;
          position: absolute;
          text-align: center; /* Centers the More-Text; If you want the text to be on the left side the value would be "left", if you want the text to be on the right side the value would be "right" */
          opacity: 0.0; /* The More-Text is invisible until you hover the item */
          -webkit-transition: opacity 1s linear;
          -moz-transition: opacity 1s linear;
          -o-transition: opacity 1s linear;
          -ms-transition: opacity 1s linear;
          transition: opacity 1s linear;
          padding-bottom: 20px; /* Some padding to the bottom */
.hiphop .item a {color: #000000;} /* The color for the More-Text */
.hiphop .item a:hover,
.hiphop .item a:focus,
.hiphop .item a:active {text-decoration: none;} /* Removes the underlining of the More-Text when you hover it */
/********************************************************* HOVER STYLES */
/********************************************************* #basis:hover */
.hiphop.dim:hover .item img.image,
.hiphop.dim:hover .item img.shadow,
.hiphop.dim:hover .item h2 {
          opacity: 0.5; /* Dimming the Item-Image, the Shadow and the Heading when dimming is active and another item is selected */
          -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
          -ms-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
/********************************************************* .item:hover */
.hiphop.dim .item:hover h2,
.hiphop.dim .item:hover img.image {
          opacity: 1.0; /* The opacity of the Item-Image and the Shadow that you are hovering should be 100%, even if the other items are dimming; Opacity: 100% = 1.0 , 0% = 0.0  */
.hiphop .item:hover .more {
          opacity: 1.0; /* The More-Text should become visible when you hover an item; Opacity: 100% = 1.0 , 0% = 0.0 */
.hiphop.jump .item:hover img.image {
          -webkit-transform: translate(0px,-15px); /* Moving the Item-Image upwards; translate( x-Value, y-Value ) in Pixels; Negative value means moving upwards */
          -moz-transform: translate(0px,-40px);
          -o-transform: translate(0px,-40px);
          -ms-transform: translate(0px,-40px);
          transform: translate(0px,-40px);
.hiphop.jump .item:hover img.shadow {
          opacity: 0.5; /* The Shadow is dimming a bit when the item is up; Opacity: 100% = 1.0 , 0% = 0.0 */
          -webkit-transform: scale(0.9); /* Shrink the Shadow a bit; Scale: 1.0 = 100% of the original size, 0.0 = 0% of the original size */
          -moz-transform: scale(0.9);
          -o-transform: scale(0.9);
          -ms-transform: scale(0.9);
          transform: scale(0.9);
Would it be:
<img src="img/thumbs/Lowriders.jpg" alt="" class="levitation_image hiphop jump" />

Similar Messages

  • How do I apply a negative effect to my photo?

    How the heck do I apply a negative effect to my photo? I scanned one of my shirts and I want to put it into a negative effect! I have NOOOOO idea how to do this and I need to do it really fast!!! PLEASE, SOMEONE HELP ME!!!!!

    I REALLY REALLY REALLY REALLY REALLY REALLY REALLY REALLY REALLY REALLY NEED TO KNOW HOW!!! PLEASE help me!!!!

  • Can you apply a pathfinder effect to a mesh object

    can you apply a pathfinder effect to a mesh object

    You can apply it, but it might not make too much sense.

  • What's the best way to apply a detuned effect to a piano (audio or midi)?

    Hi, what's the best way to apply a detuned effect to a piano (audio or midi)? I was trying to add the detune effect to a piano to make it sound warmer and old fashioned, any suggestion?
    Thanks

    Are you looking for a Honky Tonky Piano effect?
    you need two istances of the same piano (exs24 Logic patch are great)
    use fine detune (pitch) only one of the two piano istances.
    G

  • Is it possible to apply a stroke effect to a Photoshop image in After Effects?

    Hello,
    I've imported an image (a maze) from Photoshop into AE, and I want the image to appear as if it's being drawn in using the Stroke animation.  Is it possible to apply some kind of path along which the image can "fill in"--similar to how you can do this with text?  I didn't see a way to convert the image into a shape layer on which I could apply the Stroke effect, either.
    Thanks to everyone who's been so helpful in these forums--I've gotten a lot of questions answered by y'all!
    meredith

    Followed everything you said up until using the solid as a track matte, where I got a little confused.
    The effect worked more or less how I wanted when I set the starting value of the stroke at 100% and set track matte of my original image to Alpha Inverted.  When I did this, it gave the effect that the solid was disappearing to reveal the original image, if that makes any sense. 
    Is there anyway to adjust the brush shape?  Right now it is a circle, is it possible to change it into a square?  The circle brush gives an awkward edge line as the lines of the image begin to appear with the stroke effect.
    Thanks!

  • How can I apply drop shadow effects to graphics and pictures? It was very easy in previous versions and I can't find it. Thanks

    How can I apply drop shadow effects to graphics and pictures? It was very easy in previous versions of Final Cut and I can’t find it. Thanks

    Try this one, works marvelous:
    http://www.rippletraining.com/using-the-rt-drop-shadow-in-final-cut-pro-x.html
    Regards
    Nolan

  • Applying the same effect to multiple clips.

    I have a piece of video split into parts on the time line. I'm trying to apply 1/ A continuous time code, using "time code generator" and the "viewfinder" effect.
    Is there a way of applying these effects at the same settings to all 3 clips at the same time and also making the time code run continuously?
    I've noticed when i apply these 2 effects to the individual clips with all the same size settings, they appear different on each clip.
    Any ideas?

    If I read your question correctly I would suggest adding the filters to one clip and then copy the clip.
    Then highlight the clips you also want those effects on and control-click and select paste attributes and check "filters".
    Here's the problem though with you wanting to use continuous timecode. The timecode generator won't deliver what you want if you're cutting and moving clips around the timeline. For that you would want to use Timecode Reader instead

  • ? forLogic Pros. Applying specifically tuned effects to multiple tracks?

    How is it done? Let's say I have a Space Designed reverb that I have applied to a lead vocal track and I want to apply that same effect to a background vocal track without having to open another Space Designer and tune it the same as I've already done on the lead vocal track. Also what is the consensus on the pre- packaged vocal reverbs in Space Designer.

    Adam is right - put SD on a bus, and send to that bus from those tracks you want the same reverb. This will also save a lot of CPU processing - multiple instances of SD will tax your system.
    Also what is the consensus on the pre- packaged vocal reverbs in Space Designer.
    As with any presets, they are intended as starting points - suggestions, if you will (just like speed limits), as somewhere to start and tweak from. Several SD presets are actually quite nice, especially some of the old plate reverbs.
    One little SD trick: to cut down on processing, halve the sample rate while retaining length. This will cut down on overhead if you have multiple SDs on several busses.
    Also, remember that in vocals, especially multi-track backing vocals, you can get nice effects by submixing a vocal mix and applying reverb to that submix.

  • Applying a magnify effect

    Hi, I have a sentence of text and I would like to have a scaling up (magnifying effect) running across it.  I would like to apply a magnify effect where the actual layer itself becomes larger rather than a magnified duplicated segment ontop of it becomes larger. I am using an very old version of AE (6.5) Many thanks, Andy

    You could also use the Magnify Effect but if you're using it on a text layer you will need to add a solid below the layer and then select both the text and the solid layer an pre-compose them. Then you'll add the Magnify Effect and animate the center position.
    Another option would be to apply the Magnify effect to an adjustment layer. This would work if there are layers below the text. Now everything below the adjustment layer will be magnified.

  • APPLY A BENDING EFFECT

    hello everybody!
    how could I apply a bending effect to a frame? (turn a rectangular frame into an arch shape, as it could be applied to writing)

    Go to the Custom shape tool and look for "Banners & Awards" library. In that there is a flag shape.
    Drag out the shape, and simplify the shape layer
    CTRL+left click the layer thumbnail in order to load the shape
    Open a blank layer layer at the top, go to Edit>Stroke (outline) selection. Place the stroke inside, width to suit (try 20px)
    Turn off visibility of Shape 1 layer, or delete it

  • [Ai-CS5] How to apply "Adobe Deform" effect on selected object?

    Hi All,
    I have an image on document and I want to wrap it horizontally. But I don't know which suites are required to perform this operation and how.
    I went through APIs and searched in this forum and got to know that  I'll have to apply "Adobe Deform " effect.
    plz suggest!
    Thanks.

    Actly  I saw it in this thread http://forums.adobe.com/message/4158636#4158636
    Also when I get the all effects name and write them into a file. I got the "Adobe Deform" and 86 more. Here is the code snippet...
    ///Start
    ASInt32 cnt = -1;
    sAILiveEffect->CountLiveEffects(&cnt);
    cnt--;
    ofstream myfile;
    myfile.open ("C:\\Effects_Name.txt");
    for( ; cnt >= 0;  --cnt)
         const char *p = NULL;
          AILiveEffectHandle le = NULL;
          sAILiveEffect->GetNthLiveEffect(cnt,  &le);
          sAILiveEffect->GetLiveEffectName(le, &p);
          myfile << p<<"\n";
    myfile.close();
    ///END
    All I want to know is how to warp a selected  image horizontally on a document programmatically.
    Also I tried to use Action manager suite to warp the object but code has no effect. Here is the code snippet.
    //Start
    AIErr error;
                                            AIActionParamValueRef actionParam;
                                            //create a new action param value.
                                            error = sAIActionManager->AINewActionParamValue(&actionParam);
                                            error = sAIActionManager->AIActionSetInteger(actionParam,kAIEnvelopeWarpStyle, kWarpStyleArc);
                                            error = sAIActionManager->AIActionSetInteger(actionParam,kAIEnvelopeBend, 2);
                                            error = sAIActionManager->AIActionSetInteger(actionParam,kAIEnvelopeHorizDistort, 20);
                                            error = sAIActionManager->AIActionSetInteger(actionParam,  kAIEnvelopeVertDistort , 0);
                                            error = sAIActionManager->AIActionSetInteger(actionParam,kAIEnvelopeRotate90, 0);
                                            error = sAIActionManager->PlayActionEvent(kAIEnvelopeMakeAction , kDialogOn, actionParam);
    //End
    Please guide me.

  • How can i apply this glowing effect in logo with illustrator?

    How can i apply this glowing effect in logo | ThemeForest Community Forums

    I would make several copies of the original artwork.  On each copy, section the individual areas to be gradients. It looks like you have at least four gradients, both linear and radial.  It's just a matter of building each section and then reassembling each.  Not too complex, yet nice piece of artwork.

  • Applying imovie 4 effects

    Why can I only apply effects one or two times in the same project?
    Anytime after that the clip just shakes and it doesn't apply.
    please send email response to [email protected]

    thank you for the response
    my project is 6 10min clips of video
    by shaking i mean, when i push the apply button for the effect
    the clip in the main window of imovie just shakes. in other words
    like it is saying i can't carry out that command or something.
    I applied a crop effect to two clips in the project by using a plugin
    I downloaded from the internet and it worked, but attempts to use
    it again on other clips in the same project failed many times.
    by the way, do you know of the best place to find a crop plugin?
    maybe the one that I downloaded is a demo and only works a couple
    times. i need one i can use ulimited.

  • Screen goes black (dark) after applying a video effect

    I've been trying to apply some fairy dust to part of a clip, and it works great in preview. But as soon as I "apply" it, the clip goes dark, so that when i play the movie the part where there should be a special effect is dark.
    Any ideas?
    Thanks
    p.s. I am running imovie hd 5.0.2 (111) on a mac mini

    Hi Blob
    I also observed this when using fxstabilizer - I just changed back.
    moved my play-head one frame forward and cut cmd-T then applied
    the stabilizer again and then it worked fine.
    May be a one time phenomenon but may be it helps in Your case too.
    Yours Bengt W

  • [PE9] How do I apply a transition effect to a PIP?

    Hi,
    I am trying to apply the "dip to white" transition to a PIP clip, however it applies it to the whole screen. Any ideas?
    Thanks

    You are correct. Transitions, like Cross-Dissolve will "appear" to affect the PiP. Actually, they are still "over" the background, but flow seamlessly. When one does one of the Dip To Transitions, the color that they dip to will still be over the background Video.
    To do something visually similar, one could Keyframe The Brightness & Contrast of one PiP Clip to what appears to be almost white, then do the opposite for the next PiP Clip. What I cannot remember is which Effects, like Brightness & Contrast, can be Keyframed in PrE. Some Effects can be Keyframed, but some cannot. [In PrPro, I can Keyframe Brightness & Contrast, but have to do a lot more work with Levels, just because of the way that the Effects work. In PrE, some are similar, but others are not. Just cannot remember, what all the differences are.]
    I am still trying to figure out exactly what I would want to see, in lieu of a real Dip to White.
    Good luck, and maybe Steve G. has a great idea, from his Tips & Tricks book.
    Hunt

Maybe you are looking for

  • Help me out printing a report

    I'm trying to print a report directly to the printer and it's being hard. To see the report in the screen it's easy but to the printer it always gives an error. Is there a way that i can print to a local printer? I'm trying to set destype to printer

  • No Audio on MPEG-1 files since upgrade to 7.0.2

    I recently upgraded to QT 7.0.2 as well as having to re-install DVD Studio Pro 3 (and did them in that order). I have QT Pro. Since then I can't hear any audio from Muxed MPEG1 files (so, lot's of stuff online) although the EQ meter in Quicktime is s

  • Phone usage counter and carriers counter don't match?

    I have been pretty consistant about reseting my usage counter on my iphone on my billing day.  And yesterday i got a notice saying i was at 65%.  I checked my phone and only showed ~37mb of in and out usage but when i logged into att it says i'm at 1

  • Committed Spend calculation in SPM

    Hello all, I would like to know where exactly does committed spend get calculated and what is the logic in calculating committed spend? 0XSASPNACOM - I see that there is some calculation in the DTP between DS01 --> DS09 which means Inbound layer Invo

  • Upgrade to SRM 7.0 Additional fields on 'SOS' of SC

    Hello All, We have Upgrading the SRM system to 7.0. and we ahve one requirement to add few fields on Source Of Supplier' of shopping cart also we need to transfer this data from SRm to ECC system. I did following changes till now, Added new fields in