image effect in slideshow

• 

  remehtemehmedia · Member · Jan 16, 2015 at 8:35 am

  • Copy link
  • Add topic to favorites

  hello I want to add some effect to my images in featured content.
  is it in .featured-wrapper?

  the code:

  .fourth-effect .mask {
  position:absolute; /* Center the mask */
  top:50px;
  left:100px;
  cursor:pointer;
  border-radius: 50px;
  border-width: 50px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 50px solid rgba(0, 0, 0, 0.7);
  box-sizing:border-box;
  opacity:1;
  visibility:visible;
  transform:scale(4);
  transition:all 0.3s ease-in-out;
  }

  .fourth-effect:hover .mask {
  opacity: 0;
  border:0px solid rgba(0,0,0,0.7);
  visibility:hidden;
  }

  And it should look like this http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_4.html

  The question is how do I insert this code into the CSS customization after .featured-wrapper? The

  .fourth-effect .mask

  part is confusing.

  Thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 16, 2015 at 8:30 pm

  • Copy link

  Hi, I’m seeing an animation affect on your featured images where it goes into an ellipse shape when I hover over them. Is that the effect you wanted? It is different from your example.

• 

  remehtemehmedia · Member · Jan 17, 2015 at 3:36 am

  • Copy link

  No, that’s not what I wanted. I use it for now because the effect I’m asking help of cant work. I still want effect like this http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_4.html
  Can you help me sir? Thanks.

• 

  thesacredpath · Member · Jan 17, 2015 at 2:22 pm

  • Copy link

  Let me see if I can work that out for you.

• 

  remehtemehmedia · Member · Jan 22, 2015 at 3:57 am

  • Copy link

  Hello sacredpath, sir. Have you found the answer of my question?

• 

  thesacredpath · Member · Jan 23, 2015 at 12:23 am

  • Copy link

  You know, I’ve worked on this a few times, and this is about as close as I can come given the structure of the existing HTML and CSS.

  .featured-post {
      background: rgba(0, 0, 0, 0.7);
      box-sizing: border-box;
      border-radius: 50px;
      border-width: 50px;
  }
  .featured-post img {
      opacity: 0.3;
  }
  .featured-post img:hover {
      opacity: 1;
      transition: opacity 0.5s ease-in-out !important;
  }

• 

  remehtemehmedia · Member · Jan 23, 2015 at 2:31 am

  • Copy link

  Alright, thank you so much sacredpath for working that out. Much appreciated.

• 

  thesacredpath · Member · Jan 24, 2015 at 8:56 pm

  • Copy link

  You are welcome.