I am trying to replicate the image box on this page
http://kvalixhu.digitalthinkersni.co.uk/termekek/plc-hmi/unitronics/
on this page on my blog where the blog posts show i thought all i needed was thumbnail arrow buts its not showing correct with the css i have in the file
<style>
.thumbnail-arrow { width: 28px; height: 28px; position: absolute; bottom: -9px; right: 20px; background-image: url(./images/sprite1.png); background-size: 4300%; background-position: 7.993% 82.292%; transition: all 0s ease-in-out; }
</style>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
<div class="thumbnail-arrow"></div>
</div>
I wish to replecate the hover effect here but I cannot for life of me see where the orange is being applied on the product image in the first link and the arrow
That would be in your style.css on line 690.
/* Default Link Styles */
a { color: #333333; text-decoration: underline; line-height: inherit; }
a:hover, a:focus { color: #f87b06; text-decoration: none; }
a img { border: none; }
edit; and the arrow at line 1118.
.products a:hover .thumbnail-arrow {
background-position: 5.442% 82.292%;
transition: all 0s ease-in-out;
Related
Creating a card row in which each card will scale by 1.05x when hovered over it. Everything about the scaling works fine and is smooth, but one thing that really bugs me is how the image and text goes out of focus while scaling, and then regains focus once its been scaled. It's difficult to demonstrate but I've tried it in Chrome, Firefox and Edge in case it was a browser problem (somehow its even worse in edge) but I was wondering if there was a way to fix this as it really destroys the look.
HTML Code:
<div class="col-md-3 article">
<a href="">
<div class="card">
<img class="card-img-top" src="images/xchurch.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</a>
</div>
CSS Code:
.article {
transition: .5s;
}
.article a {
text-decoration: none;
color: #000;
}
.article a:hover {
text-decoration: none;
color: #000;
}
.article:hover {
transform: scale(1.05);
}
I found a few ways to fix this. The best way to deal with the distortion during scaling is with the following. However, it leaves some distortion after scaling.
.article {
transition: .5s;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
}
.article a {
text-decoration: none;
color: #000;
}
.article a:hover {
text-decoration: none;
color: #000;
}
.article:hover {
transform: perspective(1px) scale(1.05);
}
If you really cannot have any distortion, you can imitate the scaling by changing properties individually. I built a simple workaround for this scenario, but you might want to refine it to fit your needs.
.article {
transition: .5s;
margin: 10px 0 0 5px;
}
.article:hover {
max-width: calc(25% + 10px);
margin: 0;
}
.article a {
text-decoration: none;
color: #000;
}
.article:hover a {
text-decoration: none;
color: #000;
}
.article h4, .article p {
transition: .5s;
}
.article:hover h4 {
font-size: 1.61rem;
}
.article:hover p {
font-size: 1.07rem;
}
Hope these help you.
I have a hidden sidebar menu on my website, if I open my website on my desktop, my hidden sidebar has 100px width (not full), so to reveal it all you must do is hover over it. If I open my website on a mobile device, my hidden sidebar has no width, and I must click the button to reveal the sidebar.
HTML:
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
<input type="checkbox" id="showblock" />
</div>
</div>
In the code above I use checkbox to change 'click', because I just want to use CSS.
CSS:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.logo1 {
height: 10%;
width: auto;
padding-left: 20px;
transition: 0.8s;
}
.sidenav:hover {
width: 250px;
transition: 0.8s;
}
.sidenav:hover ~ #contoh {
background-color: rgba(0,0,0,0.4);
filter: grayscale(100%);
}
.sidenav:hover .logo1 {
height: auto;
width: 95%;
padding-left: 10px;
transition: 0.8s;
}
.sidenav a {
float:left;
width:100%;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
opacity: 0;
transition: opacity 1300ms
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
background-color:#5fa2db;
font-size: 30px;
}
#showblock {
display: none;
}
#media screen and (min-width:768px) {
.mobiletoggle {
display:none;
}
}
#media screen and (max-width:767px) {
.sidenav {
width:0px;
}
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
}
In the code above I used :checked, it's just a little bit different if I use :active. The problem is why my :checked/:active did not work? I looked into this jsFiddle, and it works fine, so why can't I use it? Any suggestions?
As per your CSS, modify your HTML to:
<input type="checkbox" id="showblock">
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id ="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
</div>
</div>
The input #showblock should be above the div #mySidenav in order for your CSS to work.
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
I have a div with social links and I want to make background color to fill whole div when hover any anchor with different color depending on which link is hovered.
For now background changes only beneath the anchor text.
I'm researching the way to fill whole parent with child's background color using pure CSS.
#social {
width: 400px;
height: 300px;
position: relative;
font-size: 36px;
font-weight: bold;
text-align: center;
}
a:link {
text-decoration: none;
transition: all .5s ease;
}
a:hover {
color: white;
}
#facebook:hover {
background: #3b5998;
}
#twitter:hover {
background: lightblue;
}
#google-plus:hover {
background: tomato;
}
#instagram:hover {
background: lightgreen;
}
<div id="social">
<a id="facebook" href="#"> <span>Facebook</span></a><br>
<a id="twitter" href="#"> <span>Twitter</span></a><br>
<a id="google-plus" href="#"> <span>Google plus</span></a><br>
<a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>
For first sight It looks like another attempt to change style of parent element, but there is a way to achieve the effect using pure CSS.
The way is to use ::after pseudo-selector for anchor elements. We need to define it as absolutely positioned and set up to 100% dimensions of parent. Also to prevent overlapping of siblings, we need to decrease z-index attribute of pseudo-selector to render it beneath text.
Here is a snippet:
#social {
width: 400px;
height: 300px;
position: relative;
font-size: 36px;
font-weight: bold;
text-align: center;
}
a::after{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 20px;
background: transparent;
transition: background .5s ease;
}
a:link {
text-decoration: none;
transition: color .5s ease;
}
a:hover {
color: white;
}
#facebook:hover::after {
background: #3b5998;
}
#twitter:hover::after {
background: lightblue;
}
#google-plus:hover::after {
background: tomato;
}
#instagram:hover::after {
background: lightgreen;
}
<div id="social">
<a id="facebook" href="#"> <span>Facebook</span></a><br>
<a id="twitter" href="#"> <span>Twitter</span></a><br>
<a id="google-plus" href="#"> <span>Google plus</span></a><br>
<a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>
In Safari on an iPhone a .container div that is behind a navigation menu .div scrolls when I scroll within the menu div, even though the menu is overlayed on top of the content div.
This only happens on an iPhone and I am not sure if it is related to something I have heard of called overscroll?
HTML Nav
<button class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
<nav id="sidebar" class="nav-container">
<!--Menu icon-->
<!--Widget area-->
<?php if ( is_active_sidebar( 'home_left_1' ) ) : ?>
<div id="primary-sidebar" class="nav-container primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'home_left_1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
<!--Menu js-->
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
$('.c-hamburger').click( function() {
$("#sidebar").toggleClass("show");
} );
</script>
</nav>
HTML Main Index
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="main" class="content">
<div id="content" class="content-container">
<section>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p><?php the_content(__('(more...)')); ?></p>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</section>
</div>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>
CSS
Here is the content div that scrolls even when the nav div is opened over it on an iPhone
/* Content area
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content {padding-left: 20rem;}
.content-container {
display: block;
margin: 0px auto;
max-width: 78rem;
text-align: left;
padding: 0 4rem 0 4rem;
}
.content-container section {padding: 1.25rem;}
Here is my CSS for the nav div, but keep in mind the the media query that I also included overwrite some of this CSS at the size where I am experiencing a problem
/* Nav
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
position: fixed;
width: 20rem;
text-align: center;
left: 0;
top: 0;
bottom: 0;
background-color: white;
opacity: 1;
overflow-y:auto;
padding-bottom: 4rem;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
z-index: 8;
}
/*hides sidebar for mobile breakpoints*/
nav.show {opacity: 1; pointer-events: all;}
nav .nav-container {
display: inline-block;
padding-top: 5rem;
width: 50%;
text-align: left;
}
Here is the media query for the size that has a full-screen menu:
/*xx small*/
#media (min-width: 0px) and (max-width: 600px) {
html {font-size: 10.5px;}
.content {padding-left: 0;}
.content-container {padding: 0 1.5rem 0 1.5rem;}
.c-hamburger {display: block;}
nav {height: 100%; pointer-events: none; opacity: 0; width: 100%;}
nav .nav-container {float: left; padding: 9rem 0 0 6rem;}
nav a {font-size: 1.83rem;}
nav #logo {height: 4rem; width: 4rem; margin-bottom: 4rem;}
p {font-size: 1.83rem; font-weight: 300; line-height: 2.7rem;}
p, h2 {width: 100%;}
h1 {padding-top: 8rem;}
/*give h2 intro some space*/
h2 + h3 {padding-top: 5rem;}
h2 + h4 {padding-top: 5rem;}
h2 + p {padding-top: 5rem;}
}
Thank you for any help!
You just have to put a fixed position to that div
or you can put the absolute position if you need a floating div on behalf of parent div
.content-container {
display: block;
margin: 0px auto;
max-width: 78rem;
text-align: left;
position:fixed;//absolute for floating
padding: 0 4rem 0 4rem;
}
I have a wordpress website (you can see the problem at duncanhill.com.au)
And if you look at the website, the first 3 property boxes align properly, however the 4th and 5th do some weird stuff.
The code looks like this:
HTML:
<div id="grid-gallery" class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<li class="grid-sizer"></li><!-- for Masonry column width -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<li>
<figure>
<div class="figimg"><?php the_post_thumbnail(); ?></div>
<figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption>
</figure>
</li>
</a>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>
</section><!-- // grid-wrap -->
CSS:
/* General style */
.grid-gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.grid-gallery figure {
margin: 0;
}
.grid-gallery figure img/*.figimg*/ {
display: block;
/*width: 100%;
height: 100%;*/
/*height: 210px;*/
border-top-right-radius: 5px;
border-top-left-radius:5px;
}
.grid-gallery figcaption h3 {
margin: 0;
padding: 0 0 0.5em;
}
.grid-gallery figcaption p {
margin: 0;
}
/* Grid style */
.grid-wrap {
max-width: 69em;
margin: 0 auto;
padding: 0 1em 1.875em;
}
.grid {
margin: 0 auto;
}
.grid li {
width: 33%;
float: left;
cursor: pointer;
}
.grid figure {
padding: 15px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.grid li:hover figure {
opacity: 0.7;
}
.grid figcaption {
font-family: 'lato';
font-weight: 300;
color: #000000;
padding: 25px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 2px;
border-color: #4B91F0;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.figtitle{
font-family: 'lato';
font-weight: 400;
}
.figdesc{
}
.price{
font-weight: 400;
color: #E74C3C;
}
I really can't work out how to fix it!
Any help with aligning the boxes would be greatly appreciated!
Thanks,
Tom
There are two things you need to do to fix this issue, the first one having to do with the HTML you posted.
First, change your HTML code above so that the empty list item with the class of 'grid-sizer' is removed and your anchor tags within your loop are contained within the list items. It should look like this instead of what you currently have:
<div id="grid-gallery" class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<figure>
<div class="figimg"><?php the_post_thumbnail(); ?></div>
<figcaption><h3 class="figtitle"><?php the_title(); ?></h3><p class="price"><?php the_subtitle(); ?></p><p class="figdesc"><?php the_excerpt(); ?></p></figcaption>
</figure>
</a>
</li>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</ul>
</section><!-- // grid-wrap -->
Second, add the following style to your css:
.grid :nth-child(3n+1) {
clear: left;
}