SiteOrigin image widget

Hello,

i used rocked theme with SiteOrigin image.Is there a way to put the text on the centered image instead of putting it below or above?

Link

Thank you for your help
Best regard
S.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .widget_sow-image {
      position: relative;
    }

    .widget_sow-image .widget-title {
      position: absolute;
      width: 100%;
      top: 0; 
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
    }

Regards,
Kharis

Hello kharisblank !

Thank you for responding to this email during the weekend very appreciable your service and really one of the best !!

The code is exactly what I had hoped for!

yes

I added this other piece of code with a little change in yours to give a hover effect to the image, I just can not remove the black bar below the text and in my own code has changed the color black in #cb4d64.(if you have a idea for this :slight_smile: )

.so-widget-sow-image img {
			-webkit-transition: all 250ms ease-in-out;
			-moz-transition: all 250ms ease-in-out;
			-ms-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
.so-widget-sow-image img:hover {
			-webkit-filter: brightness(50%);
			-moz-filter: brightness(50%);
			-ms-filter: brightness(50%);
  		         filter: brightness(50%);
}


.widget_sow-image {
      position: relative;
}
.widget_sow-image .widget-title {
      position: absolute;
      width: 100%;
      top: 0; 
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      text-transform: none;    
}

Is it possible in your opinion to associate the over effect with the text so that we can move the mouse over the image and that the text is the color turns out like a hover effect !

The advantage of this code would be that it is possible to manage the appearance of the text or not since the administration of the widget images which is great !! This topic will help others I think , thank you again !!

Do you also think that this type of code can be applied to the masonry widget for a hover effect and appearance of the title that is given in the administration of each image of the widget ?

Thank you very much for your answers thank you for taking the time for us !
Best regards and good Sunday !
S.

Try adding this code:

    .widget_sow-image:hover .widget-title {
      color: #fff000;
    }

    .widget_sow-image:hover .widget-title:after {
      background-color: #fff000;
    }

Regards,
Kharis

hello and very sorry for my very late responseI
it works very well and it can really give another nice design to the site, thank you very much for your application and your help ! I just can not remove the black bar below the text …

Again thank to you
Best regard
S.

You can add this CSS code to accomplish it.

    .panel-grid-cell .widget_sow-image .widget-title:after {
      display: none;
    }

Regards,
Kharis

Hello ,
magic !

thank you again and have a nice day !

best regard
S.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello
yes of course ! Thank you for your precious help and as it is friday good weekend !
:vulcan_salute: