Single Photo Transition

  • Author
    Posts
  • #1158540

    edgelinux
    Member

    I’ve tried multiple different ways viewed on the internet but I cannot seem to get my transition to work properly. I have the content selected correctly and have followed all information I can find on it. Here is the section of CSS I have. Instead of 25% opacity up to 100% opacity in no time I want a nice transition.

    .wp-caption:first-child {
    	transition-property: opacity, 4s, linear;
    	-o-transition: opacity, 4s, linear;
    	-moz-transition: opacity, 4s, linear;
    	-webkit-transition: opacity, 4s, linear;
    	opacity: .25;
    }
    .wp-caption:hover {
    	opacity: 1;
    }

    The blog I need help with is cuttingedgelinux.com.

    #1158658

    edgelinux
    Member

    I had to turn that off because it is hitting posts of a different child type in one of my categories. I tried doing :first-of-type and that seems to bleed through that way and affect more than the first image.

    #1158665

    edgelinux
    Member

    What is most frustrating is that I have a book containing a lot of CSS reference and it seems 90% of it just doesnt work on wordpress.

    From my understanding this should work:

    .wp-caption [src$='floweroflife.jpg'] img {
    	transition-property: opacity, 4s, linear;
    	-o-transition: opacity, 4s, linear;
    	-moz-transition: opacity, 4s, linear;
    	-webkit-transition: opacity, 4s, linear;
    	opacity: .25;
    }
    .wp-caption:hover {
    	opacity: 1;
    }

    but does not work at all. Breaks the selection of the image which contains floweroflife.jpg. I’ve also tried coding in the entire URL. No go.

    #1158863

    First, try using “.wp-caption img” as a selector. That will affect any image inside a caption—if you are trying to restrict it further than that, reply back about what exactly you’re trying to target. For example, to limit the effect just to captioned images on the home page, you could use a selector of .home .wp-caption img” Next, your syntax is just a bit off.

    This:
    transition-property: opacity, 4s, linear;

    Should be:
    transition-property: opacity;

    And this:
    opacity, 4s, linear

    Should be:
    opacity 4s linear

    Try updating your example to this:

    .wp-caption img {
    	transition-property: opacity;
    	-o-transition: opacity 4s linear;
    	-moz-transition: opacity 4s linear;
    	-webkit-transition: opacity 4s linear;
    	opacity: .25;
    }
    .wp-caption img:hover {
    	opacity: 1;
    }

    Remember that this stuff is CSS3, so make sure you’re testing with a browser that supports it. http://caniuse.com/#search=transition

    #1158864

    What is most frustrating is that I have a book containing a lot of CSS reference and it seems 90% of it just doesnt work on WordPress.

    Highly unlikely that’s WordPress-related. What book is it out of curiosity? I’m particularly fond of this book and learned a lot from it when it came out: http://www.cssmastery.com/

The topic ‘Single Photo Transition’ is closed to new replies.