Fill image/button with colour on hover

1 Views

I’m completely new to CSS & WordPress, I’ve spent all night trying and looking for a solution to this – so hopefully you can help me.

I have this image, and when someone hovers over it I want the white/see-through portion in the middle to fill with the colour #f7ca18 from the bottom to the top

Read More

http://wp.tek-monkey.com/wp-content/uploads/2015/06/circle1_test_seethrough.png

I’ve tried the following just to try and get a simple transition from the white/see-through inner to my desired colour, however none of them have worked. I’m not sure if I’m doing something wrong in wordpress; under appearance>editor I paste the css code at the bottom, and then on the page with the image I edit the image and type into the box (Image CSS Class) .circle-testfor example. 

.circle-test {
  background: #ffffff;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.circle-test:hover {
  background: #f7ca18;
}

.circle-test:hover{
    background-color: #f7ca18;
}

.circle-test{
    background:none;
}

.circle-test:hover{
    background:#f7ca18;
}
Post Views: 1

Related posts

1 comment

  1. Totally doable. The trick to this is adding a border-radius of 100% to create a circle around the image. Here are three ways you can do this.

    Codepen

    I also cropped & re-exported your image so that it’s a perfect 275px square (If you ever need to do bg transitions on an irregularly-shaped image, you could look into SVG). You’re more than welcome to download that image and use it instead!

    I did this kind of quickly, so let me know if you have any questions!

    /* Option 1: Image only */
.circle-test {
  display: block;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  transition: background 1s linear;
}

.circle-test:hover {
  background-color: #f7ca18;
}

/* Option 2: Div with background image*/
.circle-test2 {
  display: block;
  width: 275px;
  height: 275px;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  transition: background 1s linear;
}

.circle-test2:hover {
  background-color: #1D9B8D;
}

/* Option 3: Image is inside div*/
.circle-test3 {
  display: block;
  width: 275px;
  height: 275px;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  transition: background 1s linear;
}

.circle-test3:hover {
  background-color: #00aeef;
}
    <!-- Option 1: Image only -->
<img src="http://www.heavilyedited.com/hands-temp.png" class="circle-test"/>

<!-- Option 2: Div with background image -->
<div class="circle-test2">
</div>

<!-- Option 3: Image is inside div-->
<div class="circle-test3">
  <img src="http://www.heavilyedited.com/hands-temp.png" />
</div>

Comments are closed.