I'm building a website with WordPress, and the theme I am using has hover on post effect. I would like to reverse it, so the post image would be darker before hover, and full color with mouse on it.
Website: http://fotozakatek.com
I'm not really familiar with CSS, but that's probably the right piece of code:
.posts { margin-top: -3.95%; }
.posts .post {
display: block;
background-color: #ffffff;
width: 30.7%;
margin-top: 3.95%;
padding-bottom: 30.7%;
float: left;
position: relative;
background-size: cover;
background-position: center;
}
.posts .post + .post { margin-left: 3.95%; }
.posts .post:nth-child(3n+1) { margin-left: 0; }
.post-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.archive-post-overlay {
background: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sticky .post-overlay > p {
position: absolute;
top: 30px;
left: 30px;
font-size: 0.875em;
text-transform: uppercase;
color: #999;
}
.sticky .post-overlay > p span {
margin-right: 9px;
font-size: 18px;
position: relative;
bottom: -1px;
}
.archive-post-header {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
}
.archive-post-title {
font-size: 1.375em;
line-height: 120%;
font-weight: 700;
text-transform: uppercase;
color: #222;
word-break: break-word;
-ms-word-break: break-word;
}
.archive-post-date {
margin-bottom: 5px;
font-size: 0.875em;
color: #999;
text-transform: uppercase;
}
.post:hover .post-overlay { opacity: 1; }
.post:hover .archive-post-title { color: #3bc492; }
You have an overlay that is hidden (opacity: 0), then on :hover, the overlay shows (opacity: 1). You want to reverse those so that the overlay is visible by default, and hidden on hover.
These changes are in style.css
~ line 604, in .post-overlay remove the opacity: 0.5
~ line 669, in .has-post-thumbnail .post-overlay remove opacity: 0
~ line 664, in .post:hover .post-overlay change opacity: 1 to opacity: 0.
Related
I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN
I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.
Any hint you can provide would highly be appreciated.
Thanks
CSS
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-color: #09334f;
position: relative;
}
#yetiSVG {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-block;
}
#lightSVG {
position: absolute;
top: -24rem;
left: 0;
overflow: visible;
display: inline-block;
}
.content {
padding: 5rem 3rem 0 25rem;
position: relative;
z-index: 10;
font-family: "Source Sans Pro", sans-serif;
color: #fff;
}
.content h3 {
margin: 0 0 0.8rem;
font-size: 2.625rem;
font-weight: 900;
line-height: 120%;
}
.content p {
font-size: 1.25rem;
font-weight: normal;
line-height: 150%;
color: #d1e2ed;
}
.content p span {
text-decoration: line-through;
}
svg {
max-width: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
/* vertical-align: middle; */
/* overflow: hidden; */
}
I'm writing a document in Typora and I need a paragraph break whitch is a line with text in the middle. The whole document should be exportable to pdf.
result
I currently tried this, but it doesn't work when exporting to pdf:
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
position: relative;
margin:0;
text-transform: uppercase;
}
h3 span {
background-color: white;
padding: 0 0.3em;
}
h3:before{
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 2px solid #015573;
}
Try using below code. It's working fine. You can export to pdf with no problems. I did not use the background-color: white; property because the background color is white by default of any exported pdf. BTW, if you are using a dark theme for Typora, you can specify that property. It won't affect the exported style in the pdf file.
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
text-transform: uppercase;
overflow: hidden;
}
h3:before,
h3:after {
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
background-color: #015573;
}
h3:before {
right: 0.5em;
margin-left: -50%;
}
h3:after {
left: 0.5em;
margin-right: -50%;
}
<h3>Heading</h3>
This is how exported pdf looks like:
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<p class="fancy"><span>A fancy subtitle</span></p>
My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.
I just checked my website via my GalaxyS5 smart phone and noticed the some information garbled on bottom portion of site. It normally looks fantastic on the smart phone but this seems like a big problem to me as most of my visitors are mobile visitors.
Attached are screen shots from my mobile device. Can someone identify the issue with the website?
.art-button-wrapper .art-button
{
font-weight: bold;
font-size: 12px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: left;
text-decoration: none !important;
color: #FEF200 !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 31px;
height: 31px;
margin: 0 !important;
padding: 0 19px !important;
overflow: visible;
cursor: default;
z-index: 0;
}
.art-button img, .art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 31px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2 .art-button-wrapper
{
display: block;
float: left;
}
input, select, textarea, select
{
vertical-align: middle;
font-weight: bold;
font-size: 12px;
}
.art-block select
{
width:96%;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FFF200 !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #FFF200 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display: block;
position: absolute;
z-index: -1;
height: 93px;
margin: 0;
padding: 0;
background-image: url('../images/button.png');
}
.art-button-wrapper .l
{
left: 0;
right: 8px;
}
.art-button-wrapper .r
{
width: 409px;
right: 0;
clip: rect(auto, auto, auto, 401px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -31px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -62px;
}
.art-button-wrapper input
{
float: none !important;
}
/* end Button */
/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublock-body
{
position: relative;
z-index: 1;
padding: 0;
}
.art-vmenublock-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublock
{
margin: 7px;
}
/* end Box, Block, VMenuBlock */
/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
/* end Box, Box, VMenuBlockContent */
How can you make absolutely positioned element appear under static element.
Z-index doesn't seem to work. The green box should be above the line (will be white).
http://jsfiddle.net/matthewabrman/pbL52gtj/
html:
<h3 class="line"><span>Lorem Ipsum</span></h3>
css:
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}
Try this. Hope you are trying to get this FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
z-index:-1;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
position: relative;
z-index:1;
}
OR FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
z-index:-1;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}