spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

CSS help - Shopify Blockshop theme collection page alt image hover changes


You have to make some change in your css:-

For opacity:-

 .product-grid .image-wrapper {
        display: inline-block;
        max-width: 100%;
        opacity: 1 !important; // add this in your
css
        position: relative;
        width: 100%;
    }

For "SALE" and "SOLD OUT" circle -

.reveal {
    position: relative;
    z-index: 1; // add this in your css
}

.product-grid .circle {
    font-size: 1.16667em;
    height: 90px;
    padding: 35px 0 0;
    right: 15px;
    top: 15px;
    width: 90px;
    z-index: 2; // add this in your css
}

Image hover changes :-

.reveal .hidden {
    height: 100%;
    left: 10px;  // Change this in your css
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease-in-out 0s;
    width: auto;
    z-index: -1; }

Categories : CSS

Related to : CSS help - Shopify Blockshop theme collection page alt image hover changes
Need Example of Using JQuery with Shopify to Create Collection and Use Returned ID to Add Products
Not tested but should help you along. <script> $(document).ready(function () { function createCollection(collection_title){ $.ajax{ type: 'POST', url: '/admin/custom_collections.json', data: {"title":collection_title}, dataType: 'json', success: function(response) { console.log(response); colle

Categories : Javascript
Shopify - Adding Image to Notification Emails
Thanks to the help of a coworker, we got this figured out. When looping through the line_items, do the following to get the image: <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}"> and the image will output. There are a lot of different image sizes you can use in place of 'thumb'. Check those out here. Hope this helps someone else!

Categories : Email
Change image properties on hover when hovering element which trigger when hovering the image
Assuming that you want to show a title element to an image and you want to highlight the image also if you hover the title element. You need to move your "title" element before the image so you can react either to the hover state of the parent element or the title element to highlight the image. #overimage { position: relative; line-height: 0; font-size: 0; } .Xevoz_Showdown { d

Categories : CSS
Use other image as thumbnail for Sparkling Theme Polular Post Widget in wordpress
you can try using this plugin https://wordpress.org/plugins/autoset-featured-image/ or this https://wordpress.org/plugins/easy-add-thumbnail/ .the second one works out of the box .when you publish a post it checks for a featured image. If it does not find one, then it looks for the first image attached to the post and sets it as featured image

Categories : Wordpress
How to change image on hover of a different div
like this ? Wouldn't normally put the width and height inline but for the sake of ease here $('#thumbs img').hover(function(event){ var thisSRC=$(this).attr('src'); $('#main').attr('src',thisSRC); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="main" src="http://lorempixel.com/200/100/sports/1"> <div id="thumbs"

Categories : Jquery
Recently Add
How to start a new column in flex column wrap layout
Add record CSS not rendering Jtable
Inline CSS Does Not Work When Transferred to External Stylesheet
CSS Positioning Issue on Chrome
PhantomJS + CMYK color css3
Wrap an input with pseudo borders made of divs
Site doesn't display styling on Firefox or IE –– works fine with Chrome and Safari
CSS - Position image to the left + partly cut-off + responsive + Bootstrap
Can i cross-fade li elements using angularjs ngAnimate
hidden-sm in bootstrap 3
Ruby on Rails - Bootstrap / Form_for vs input_groups - How to stop styles butting heads
locating joomla files when I do inspet element in firefox
Some Images flicker in IE8
Tooltip CSS ONLY: focus and hover prevents access to following button
Strange shadowed boxes randomly appearing - CSS error?
Bootstrap popover dynamic size
Horizontal List Exceeding Right Margin
How to put !important in all CSS properties using SASS or CSS3?
Wrap content and remove extra whitespace?
Force div's height expand with it's container
Animation delay on page load
CSS Keep on-hover item open until another item is hovered on
Confused by LESS replace() function behavior
How to transform an image in SVG (or CSS) into a non-parallelogram shape?
Ignore CSS declaration on a specific control
Mark space for :after content non-breaking
2 inline images - 1 centered and 1 right using Bootstrap
Bootstrap - three sibling col divs, is this layout possible?
jquery mobile-vertically center two lines of button text
Change footer content in magento
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.