How to add hover effects on images (uploaded with theme configurator)?

[tutzu93]

I need help in adding hover offects to my uploaded images. See the attached pictures. I've searched around but i haven't been able to find something helpfull. Thanks!

 

 

[zeki893]

you can add hover effect in css on the object. you can google a bunch of cool effects.

 

#box1:hover {

opacity:0.8;

}

[vekia]

hello

but the question is what kind of "hoveR" effect you want to add

please describe it a little, everything depends on it!

[tutzu93]

Thanks for replying guys. I need to add a grow, push or pop effect on all images. I tried zeki's solution, but in vane because the css code for those images looks like this: #htmlcontent_home ul li img { . I need something a bit more explicit   

[vekia]

hello

simple scale solution:

#htmlcontent_home li {
  overflow:hidden;
}
#htmlcontent_home img {
  transition: all .2s ease-in-out;
}
#htmlcontent_home img:hover{
  transform: scale(1.1); 
}

[tutzu93]

Works like a charm, thanks a lot vekia         

[vekia]

great :-)

im going to mark this topic as solved.

i also moving to to the proper forum section

with regards,

Milos

[Designinfo.in]

how can text be added to the image with this effect in the bottom left corner with a border only on hover ?

[Donnerberg]

 

hello

simple scale solution:

#htmlcontent_home li {
  overflow:hidden;
}
#htmlcontent_home img {
  transition: all .2s ease-in-out;
}
#htmlcontent_home img:hover{
  transform: scale(1.1); 
}

Hello Vekia,

 

Can you please tell me where to put this code?

 

Many thanks

[Donnerberg]

I think answere is :  modules/themeconfigurator/css/hooks.css

 

Code should looks like:

/* Home hook CSS */
#htmlcontent_home ul {
  margin: 0 -5px; }
  #htmlcontent_home ul li {
    padding: 0 5px 10px; }
    @media (max-width: 479px) {
      #htmlcontent_home ul li {
        width: 100%; } }
    #htmlcontent_home ul li img {
      max-width: 100%;
      height: auto; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li img {
          min-width: 100%; } }
    #htmlcontent_home ul li.htmlcontent-item-5 {
      width: 66.6667%; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li.htmlcontent-item-5 {
          width: 100%; } }

#htmlcontent_home li {
  overflow:hidden;
}
#htmlcontent_home img {
  transition: all .2s ease-in-out;
}
#htmlcontent_home img:hover{
  transform: scale(1.1); 
}

/* Top hook CSS */
  #htmlcontent_top {
    float: right;
    width: 33%;
    max-width: 391px;
    padding-left: 5px;
}
  @media (max-width: 767px) {
    #htmlcontent_top {
      width: 100%;
      max-width: 100%;
      padding-left: 0;
      padding-top: 0px; } }
  @media (max-width: 767px) {
    #htmlcontent_top ul {
      margin: 0 -5px; } }
  #htmlcontent_top ul li {
    width: 100%;
    margin-bottom: 10px; }
    @media (max-width: 767px) {
      #htmlcontent_top ul li {
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        width: 50%; } }
    #htmlcontent_top ul li:last-child {
      margin-bottom: 0; }
    #htmlcontent_top ul li img {
      max-width: 100%;
      height: auto; }

/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */

And IMPORTANT think is to remove cache from your browser.

 

And yes.. It WORKS!