Overlapping image – GeneratePress

This topic has 13 replies, 4 voices, and was last updated 2 years, 1 month ago by Fernando.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
January 14, 2021 at 5:52 pm #1619286

Leanne

Hi,

I am trying to recreate a non-wordpress website into wordpress. There is one problem, I cannot solve. I am not sure it is possible.

Please look at the two examples and let me know if the round image just below the text “About Us” can overlap as in the original example website.

Thanks,
Leanne

January 14, 2021 at 5:59 pm #1619291

Leo
Staff
Customer Support

Hi there,

If you use the browser inspect tool, then you can see that it’s actually just a single image:
https://www.screencast.com/t/3HLEK1WlOXWA

January 14, 2021 at 6:45 pm #1619321

Leanne

Yes, I know. Is there a way to make it 1/2 on the text area and 1/2 on the background?

Thanks

January 14, 2021 at 6:50 pm #1619330

Leo
Staff
Customer Support

Not sure if I fully understand but there isn’t anything built-in for this.

You would try using GenerateBlocks and negative margin to achieve this.

I’ve used similar ideas in Grill:
https://gpsites.co/grill/?page_id=25

There is a video on this as well:
https://youtu.be/WCyp5Xg4aXM

Might be a little overkill for what you are trying to do though. The picture solution should work just as well.

January 14, 2021 at 7:46 pm #1619366

Leanne

Thank you

January 14, 2021 at 7:46 pm #1619367

Leo
Staff
Customer Support

No problem 🙂

January 14, 2021 at 7:52 pm #1619374

Leanne

The negative value on the image work! Thanks again!

January 14, 2021 at 7:53 pm #1619376

Leo
Staff
Customer Support

Glad to hear 🙂

March 28, 2022 at 4:27 pm #2170487

Vee

Hi I am doing the same, but using the Feather template, and trying to use it with my own text. Once I imported the template onto my site, the words do not overlap the second container, despite the negative margin. the text disappears under the second container.
note:
the template did not have a negative margin on the container, but instead on the heading.
I tried adding a container around the heading and giving it a negative margin instead, as described in the video, but this did not work either.
but the text still hides underneath the second container/background image.
any thoughts? thanks.
see here for original template page
and
here

March 28, 2022 at 5:57 pm #2170528
Fernando
Customer Support
Hi Vee,

It seems that your Site Import is missing Additional CSS that should have been imported along with Feather.

Specifically, this code:
```
/*front page hero container*/
.gb-container.hero-container {
	overflow: visible;
}
```
Can you try re-importing Feather? Or, can try going to Appearance > Customize > Additional CSS and add this CSS?

Here’s the entire CSS code that should have been added along with Feather:
```
/* GeneratePress Site CSS */ /*archive page product hover effect*/
.inside-wc-product-image:after {
    content: "View Product";
    left: 0;
    right: 50%;
    bottom: 0;
    top: 0;
	  color: #ffffff;
    position: absolute;
    font-weight: 100;
    padding: 60% 10% 0 10%;
  	text-align: center;
	  opacity: 0;
	  border-left: 6px solid var(--accent);
	  transition: all 0.5s ease;
}

.inside-wc-product-image:hover:after {
	background-color: var(--hover-semi-trans-dark);
  opacity: 1; 
  right: 0;
}

/*front page hover semi-transparent effect*/
.has-trans-bg {
    position: relative;
}

.has-trans-bg:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	  background-color: var(--hover-semi-trans-light);
	  opacity: 0;
  	z-index:-2;
		transition: all 0.8s ease;	
}

.has-trans-bg:hover:after {
	opacity: 0.5;
}

/*front page hero container*/
.gb-container.hero-container {
	overflow: visible;
}

/* product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
}

/*front page menu color*/
@media (max-width: 1024px) {
	.home .main-navigation:not(.slideout-navigation) .main-nav ul li a, .home .menu-toggle, .home .main-navigation .menu-bar-items a {
    color: var(--base) !important;
	}
} /* End GeneratePress Site CSS */
```
Kindly check your WordPress version as well as having an older version still doesn’t have the “Additional CSS” functionality, in which case, you’ll need to update.

Hope this clarifies. 🙂
March 29, 2022 at 7:52 am #2171358

Vee

Thanks Fernando. I reimported the template and got it working. I think I may not have imported “site options” last time, probably the issue. I dont actually need the woocommerce, so deleted a lot of items… could also have been the issue, but it seems ok now. just wanted to use the template for a splash page. 🙂

Thanks!

March 29, 2022 at 5:18 pm #2171747

Fernando
Customer Support

You’re welcome Vee! Glad to be of assistance. You’re correct, you’ll need to import the site options for the additional CSS to be included. Feel free to reach out anytime you’ll need assistance with anything else. 🙂

March 29, 2022 at 8:35 pm #2171842

Leanne

thanks

March 29, 2022 at 9:11 pm #2171858

Fernando
Customer Support

You’re welcome Leanne! 🙂
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

[Resolved] Overlapping image

Popular Articles

Start building better websites today.