Divi blog grid display title on hover - wordpress

I'm actually using the Divi Visual Builder and I would like display a blog grid who show title of each posts on the image of the posts only when you move the mouse over it.
I found some solutions on the web, but either it doesn't work at all, or the effect doesn't work in tablet and mobile displays. There is nothing about this on the Divi MarketPlace for the Blog module.
here is an example of what I would like to do : http://www.artazoi.com/murs-a-programmation/
(this website is using the Bakery Page Builder and I don't want to use it)
Do you know if Elementor Pro offers this option ?
Thank you all for your helps :)

Use a simple DIVI Builder Blog Module with position absolute. Add this CSS code
.et_pb_module.et_pb_blog_grid_wrapper article{
position: relative;
}
.et_pb_module.et_pb_blog_grid_wrapper article .entry-title{
display: none;
position: absolute;
top: 0;
}
.et_pb_module.et_pb_blog_grid_wrapper article:hover .entry-title{
display: block;
}

Related

iFrame implementation on Wordpress (DIVI) site

I have the following problem, one of our customers wants to have a certain animated graphic on one of their pages.
graphic
link
It's basically a metal nut that u can turn with your mouse wheel to see what services they offer regarding production.
On the old website they had, it implemented like this
Nicely, fullscreen with scrolling functionality.
However, when I try to use an iframe to implement the graphic it looks like this (scroll to the bottom to see the graphic)
The code I use for the iframe is the following:
<iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
I already tried to add width attribute but it only makes the container larger, not the graphic. I'm new to the whole iframe stuff, so I really need your help =)
Thanks and regards!
If you observe their css you will find somthing like that, that is useful for the iframe to be adaptative :
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 62.5%;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="responsive-iframe"><iframe class="fuenfeck" src="https://sinerefl.sirv.com/qualicut/qualicut.spin">
</iframe>
</div>
any particular reason you want to use an iFrame? A much better way of embedding a Sirv Spin is to follow these instructions - https://sirv.com/help/articles/sirv-spin/#embed-a-360-spin
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://sinerefl.sirv.com/qualicut/qualicut.spin"></div>
There's also a WordPress plugin - https://wordpress.org/plugins/sirv/ which is Divi compatible

How to have separate layout for (Posts and Page) and different for Homepage? CSS

I am modifying my site using Custom CSS and whenever I make changes, it affects the whole site. I wanted to make only changes to the posts and pages and seperately for the homepage.
I asked my theme creator and this is what they replied.
"To know if you’re on homepage or a single page, check the classes on #content-wrapper-inside element. It will have ‘.home’ class on homepage, and ‘.single’ class on single post." I wasn't able to find.
I used these to customise,
#media (min-width:960px){
.main-content{
display: block;
padding-left:253px;
}
.sticky-kit-wrapper {
margin-bottom: 120px;
margin-left: auto;
margin-right: auto;
max-width: 1480px;
}
.sticky-kit-wrapper {
padding-left: 60px;
padding-right: 0;
}
This affects the entire site, is there anyway I can code separately for my homepage?
My website is, www.defensionem.com
Thank-you for the help.
Pretty easy, your theme is actually doing all the heavy lifting for you. All your pages in the site have the location built into the wrapper, so all you need to do is target the correct wrapper for the page eg:
Home : home
Archive : archive
Single : single
Page : page
So you css would look something like:
/* need to modify the home page */
.home .sticky-kit-wrapper {
display:none;
}

Responsive videos using oembed in Wordpress 4.2.x?

Is it possible to make videos in WordPress 4.2.x responsive using the oEmbed shortcode? If not, are there better solutions than having to use some outdated plugin? I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
I have searched and searched but have found nothing so far ... probably just not using the right search terms. I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
This may or may not answer your question, but I've just tried something that works by installing a plugin called Advanced Responsive Video Embedder and adding the following css:
.embed-youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
}
.embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The Plug-in also has some really good options, like editing paramaters of the embed like so: wmode=transparent iv_load_policy=3 modestbranding=1 rel=0 autohide=1
P.S.: .embed-youtube is the class name of the container div engendered by the plug-in..
Hope that helps!
You can use the plugin called 'FitVids for WordPress' to make your youtube videos responsive.
You can use it like this:
<div id="youtubevid">
[youtube R-S9vXFVOnU]
</div>
Now you have to add this CSS selector to make it responsive using the plugin. Go to Appearance->FitVids and enter the id of the selector and save changes: jQuery("#youtubevid").fitVids();
I wrote a plugin called "Responsive Media". It makes embedded media by oEmbed responsive out of the box.
https://wordpress.org/plugins/responsive-media/

z-index issue on Twenty Eleven WordPress theme with jQuery ColorBox

On http://allmyzip.com/colorbox1/ there is a simple image gallery with the jQuery Colorbox/Lightbox plugin for Wordpress that opens an auto-running slideshow of 500 x 500 images when one of the thumbnails is clicked.
The site is using Wordpress 3.3.1 and the standard, unmodified Twenty Eleven version 1.3 theme that comes default with a new Wordpress install. In IE 9, Firefox 10 and in Chrome
16 all three browsers are showing the slideshow images BEHIND the Header/Navbar.
I have researched this for many hours and cannot find what to change, and/or where, to correct this problem. I created a simple child theme to try to test certain changes to the z-index value in the section of the style.css shown below, as some researched suggestions recomended, but changing the z-index value here to 2 or to 999 or to 99999 still did not get the images in the slideshow to display properly. So, ALL of the CSS running the site is 100% standard, out-of-the-box Twenty Eleven CSS code.
The simple code in the child theme is limited to what you see below: There have been NO changes to the standard code at this time. What shows below is where I tried some
previous edits and then returned the settings back to standard:
`#import url("../twentyeleven/style.css");
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
Any specifics as to what needs to be edited and where??
Thanks very much!!
The header id=branding has z-index of 9999, which is the same as the lightbox, so I would expect conflicts.
Change it to 5000 or something, I see in firebug that it fixes the problem.
It seems to me that
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
border-image: initial;
}
may need to include
position:absolute;
z-index:20;

If I remove the wp title of my site from the admin settings, will it affect SEO?

I want to replace it with a fancy logo image. I am sure most sites do this... is it ok?
I would keep the title settings in admin, but change the theme so that the home page don't show the title, but has it in the HTML-title. You could also move the <h1>-title off screen using css.
It's actually a great SEO technique to utilize the page title as the main <h1> for the site (since it appears on the top of every page). If you don't want it to display, DO NOT use #headerimg h1 {display:none;} to hide it, instead try some tricky CSS like this:
#headerimg h1 {
position: absolute;
margin-left: -3000px;
font-size: 1px;
}

Resources