BestScamEver

Unbelievable. This is clearly a problem with Gutenberg, and instead of attempting to fix it… the admin just says “no, it’s not broken, you’re broken!”

Now, for every image we insert in to a post, we have to mess around with the image size percentage to get the caption to align with it. Oh, and there is no way to make the editor remember that we want images to link to the media file by default, as we could always do before this abomination of an editor was installed.

The Gutenberg editor is a massive fail. I’m talking Titanic level of failure. And all we get is nonsense about how it’s our fault. Fix it.

You need to edit the “portfoliooverlay” in the stylesheet CSS. So, open the stylesheet in the editor and search for that, then play around with the settings.

Here is my portfoliooverlay settings on one of my sites. That “circle with + sign” is invisible (due to the opacity settings I changed) until the user mouseover (hover) the image. You can make it always invisible by changing opacity in a few places. Again: play around with it or google it for more info.

.portfoliooverlay span {
	font-size:40px;
	font-weight: bold;
	background-color: #384249;
	height: 45px;
	width: 75px;
	display:block;
	text-align: center;
	margin: 0 auto;
	position:absolute;
	top:0px;
	left:0px;
	margin-left:80px;
	margin-top:45px;
	-moz-opacity: 0.0;
	-khtml-opacity: 0.0;
	opacity: 0.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
	padding-top:30px;
	-moz-border-radius:75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
	line-height: 15px;
}
.portfoliooverlay:hover span {
	-webkit-transition: opacity 1s ease-in-out;
	opacity: 0.8;
	-webkit-transition-duration: 0.4s;
	-moz-transition: opacity 1s ease-in-out;
	opacity: 0.8;
	-moz-transition-duration: 0.4s;
}
.portfoliooverlay {
	position:absolute;
	top:0px;
	left:0px;
	width:225px;
	height:158px;
}
.portfoliooverlay:hover {
	-webkit-transition: border-bottom 1s ease-in-out;
	opacity: 1;
	-webkit-transition-duration: 0.4s;
	-moz-transition: border-bottom 1s ease-in-out;
	opacity: 1;
	-moz-transition-duration: 0.4s;
}
.portfoliooverlay a {
	color:white;
	display:block;
	width:225px;
	height:158px;
}
.portfoliooverlay a:hover {
	color:white;
	transition: all 0.5s ease-out;
}