5 replies [Last post]
crzynewbie004
crzynewbie004's picture
Offline
newbie
Los Angeles
Last seen: 7 years 15 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2014-04-07
Posts: 4
Points: 6

Hey all,

Firstly, I'd like to say I am a big time beginner. My coding experience is comprised of adding css on top of the basic features that came with my Yahoo site builder layout. For the past six months I have been tweaking the site whilst learning how to do html and css. Now I'm after bigger and better features and I'm finding difficulties.
Currently I'm trying to add a grow feature to my product images. I have the below css to input, however I am really stuck trying to figure out where to place it in terms of my layout. If it takes someone two minutes to respond and tell me where to put it you can save me two days or even 2 months... Thanks so much!

.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

----------- MY WEBSITE CSS -----------

/* Elements */
/* 011007 0.03*/
* {
padding:0;
margin:0;
}
td, div, span {
font-size: $global-font-size /*75%/1.3*/;
color:$text-color;
}
body {
background-color: $background-color;
background-image:url('$background-image') 0 0;
font:normal $global-font-size $text-font/*75%/1.3 Arial,Helvetica, sans-serif*/;
color:$text-color;
text-align:center;
width:100%;
}
a{
text-decoration:underline;
color:$link-color;
}
a:hover{
text-decoration:none;
}
select option{
padding-right:10px;
}

/**********/
/*MAIN IDS*/
/**********/
#mainbody{
width:$page-layout; /* 760px; || auto; */
margin:0 auto;
text-align:left;
background:$Template-background-color url('$Template-background-image') 0 0 no-repeat;
padding:0;
border: 5px solid $Page-border-color;
}
#topNav{margin:0 auto; background:$contents-navigation-background-color url('$Contents-navigation-background-image') 0 0;
padding:2px 0 2px 0;
border-bottom:2px solid $contents-navigation-border-bottom-color;
height:1%;

}
html>body #topNav ul { height:auto; zoom:0; }
#topNav div{

display:inline;
margin-top: 2px;

}
#topNav div a{
color:$contents-navigation-text-link-color;
padding:0 15px 0 15px;
border-right:1px solid $contents-navigation-link-separator-color;
text-decoration:none;
}
#topNav .topNavViewCart a{
border-right-style:none !important;
text-decoration:none;
}
#topNav div a:hover, #topNav .topNavViewCart a:hover{
color:$contents-navigation-text-link-hover-color;
}
#topNav .topNavViewCart a{
background: url($contents-navigation-shoppingcart-icon) right center no-repeat;
padding-right:15px;
}

#footer{
background:$footer-background-color url('$footer-background-image') 0 0 repeat;
height:1%;zoom:1;
}
#header{
background:$header-background-color url('$header-background-image') 0 0 repeat;
height:1%;
min-height:$header-background-image-height;
height:auto *!important*;
height:$header-background-image-height;
}

#header:after, #footer:after, #itemContainer:after, .caption:after, .message:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
html>body #header, html>body #footer {
height:auto;
}

/**************/
/*END MAIN IDS*/
/**************/

/*********/
/*CLASSES*/
/*********/
.clear {
clear:both;
display:block;
font-size:1px;
height:1px;
line-height:-1;
}
.last {
border:0 solid;
}
.breadcrumbs{
padding:5px;
background-color:$template-background-color;
}
/*************/
/*END CLASSES*/
/*************/

/***************/
/*MISCELLANEOUS*/
/***************/
#topNav .topNavViewCart a:hover, #footer .links a:hover, #bodyContent .contentsTable .itemName a:hover, #topNav div a:hover{
text-decoration:underline;
}
/*******************/
/*END MISCELLANEOUS*/
/*******************/

/********/
/*HEADER*/
/********/
#header .storeLogo{
width:460px;
font:bold $company-name-text-size $company-name-text-font /*2em*/;
color:$company-name-text-link-color;
margin-left: auto;
margin-right: auto;

}
#header .storeLogo a{
color:$company-name-text-link-color;
text-decoration:none;
}
#header .searcharea{
visibility:hidden;
position:absolute;
right:0px;
width:300px;
margin: auto
visibility:hidden;
margin-left: auto;
margin-right: auto;
width:264px; background-color:$search-background-color;
text-align:center;
border:1px solid $search-border-color;
margin-left: auto;
margin-right: auto;
padding:2px 0;
margin: 2px;
}
#header .searcharea .searchText{
font:bold 13px Arial, Helvetica, sans-serif;
color:$search-text-color;
margin-right: 3px;
margin-left: auto;
margin-right: auto;
}
#header .searcharea .searchForm{
margin:auto;
margin-left: auto;
margin-right: auto;
}
#header .searcharea .searchInput{
width:95px;
margin-left: auto;
margin-right: auto;
}
#header .searcharea select{
max-width: 150px;
vertical-align: middle;
}
#searchSubmit.ys_primary{
border:solid 1px #fff;
margin-left:3px;
padding:0;
background: $footer-background-color url('$Search-button-background-image') 0 0 repeat-x;
color:$footer-text-link-color;
font:bold 11px Arial,verdana,sans-serif;
text-align:center;
cursor:pointer;
}
/************/
/*END HEADER*/
/************/

/********/
/*FOOTER*/
/********/
#footer .links{ background-color:$footer-navigation-background-color;
padding:5px;
color:$footer-text-link-color;
font-size:$footer-font-size;
text-align:center;
}
#footer .links a{
color:$footer-text-link-color;
font-weight:bold;
padding:0 5px;
text-decoration:none;
font-size:$footer-font-size;
text-transform:uppercase;
}
#footer .yahooLogo{
float:left;
height:29px;
width:82px;
margin:10px 0 10px 10px;
}
* html #footer .yahooLogo{
height:39px;
display:inline;
}
#footer .copyright{
float:right;
text-align:right;
padding:15px 15px 0 0;
color:$copyright-text-color;
font-size:$footer-font-size;
}
/************/
/*END FOOTER*/
/************/

/***************************************/
/*BODY CONTENT (HOME, SECTION AND ITEM)*/
/***************************************/
#bodyContent .contentsTable{
margin:0px;
}
#bodyContent .caption, #bodyContent .message{
_height:1%;
}
#bodyContent .message, #bodyContent .caption, #bodyContent .pageText{
background-color:$template-background-color;
}
#bodyContent .message
}
#bodyContent .message .
}
#bodyContent .contentsTable .Image img{
margin:0 10px 5px 10px;
}
#bodyContent .message .pageTitle{
color:$message-title-text-color;
display:block;
font:bold $message-title-text-size $message-title-text-font/*1.2em Arial, Helvetica, sans-serif*/;
margin:0 10px;
padding:10px 0;
}
#bodyContent .caption .pageTitle, #bodyContent .caption .pageTitleCenter, #bodyContent #info-div #searchpageHeader{
color:$item-title-color;
display:block;
font:bold $item-title-text-size $section-title-text-font/*1.2em Arial, Helvetica, sans-serif*/;
margin:0 10px;
padding:10px 0;
}
#bodyContent #info-div #searchpageHeader{background-color:$section-title-background-color; color:$section-title-color; font:bold $section-title-text-size $section-title-text-font; margin:0 10px;
padding:10px 0; display:block;
}

#bodyContent .itemPageTitle{
color:$item-title-color;
font:bold $item-title-text-size $item-title-text-font/*1.2em Arial, Helvetica, sans-serif*/;
padding:10px;
background-color:$template-background-color;
}
#bodyContent .message .pageText, #bodyContent .caption .pageText, #bodyContent .pageText{
padding:0 10px 10px;
}
#bodyContent #info-div .infoText{
padding:10px;
}
#bodyContent .contentsTable .itemName, #bodyContent .contentsTable .wrapPadding{
padding:2px 5px;
}
#bodyContent .contentsTable{
width:100%;
border-collapse:collapse;
}
#bodyContent .contentsTable .itemName a{
font:bold $global-font-size $text-font/*1.1em Arial, Helvetica, sans-serif*/;
color:$link-color;
text-decoration:none;
}
#bodyContent .contentsTable .salePrice, #bodyContent .itemContainer .salePrice{
color:$emphasis-color;
padding-bottom:10px;
font-weight:bold;
}
#bodyContent .vertical, .imageCenter, .pageTitleCenter{
text-align:center;
}
#bodyContent .contentsTable .contentsVSeparator{
border-right:1px dashed $contents-border-color;
}
#bodyContent .contentsTable .contentsHSeparator{
border-bottom:1px solid $contents-border-color /*#CECECD*/;
}
#bodyContent .specialsHeader{
background-color:$specials-title-background-color;
padding:5px;
color:$specials-title-color;
font:bold $specials-title-text-size $specials-title-text-font/*1.4em*/;
text-align:center;
border-bottom:4px solid $specials-title-border-bottom-color;
margin-bottom:5px;
}
#bodyContent .caption .Image, #bodyContent .itemContainer .Image , #bodyContent .contentsTable .Image , #bodyContent #info-div .Image{
padding:10px;
margin:0;
}
#bodyContent .pageText .pageTextHeader{
font:bold $item-caption-title-text-size $item-caption-title-text-font;
padding:10px 0;
color: $item-caption-title-text-color;
}
#bodyContent .accessoriesHeader{
color:$accessories-title-text-color;
font:bold $accessories-title-text-size $accessories-title-text-font /*1.1em*/!important;
padding:20px 0 8px 10px;
border-bottom:1px solid $contents-border-color;
margin-bottom:5px;
}
#bodyContent .contentsTable td table{
margin-left: 10px;
}
#bodyContent .contentsTableTd{
padding:5px;
}
/*#bodyContent .contentsTable .ellItemInfo{
margin-left: 5px;
}*/
#bodyContent .contentsTable .abstract{
padding: 3px 0;
}
#bodyContent .contentsTable .itemNameMultiLine{
display:block;
padding: 3px 0;
}
/******************/
/*END BODY CONTENT*/
/******************/

/**************/
/*ITEM DETAILS*/
/**************/
#bodyContent .itemContainer img{
vertical-align:middle;
}
#bodyContent .itemContainer .addToCart{
border-top:1px solid $contents-border-color;
padding:10px;
}
#bodyContent .itemContainer .itemProperties{
margin:20px 10px 0 50px;
}
#bodyContent .itemContainer .itemName, #bodyContent .contentsTable .itemName, #bodyContent .itemContainer .priceBold{
font-weight: bold;
}
#bodyContent .itemContainer .itemName, #bodyContent .itemContainer .itemCode, #bodyContent .itemContainer .itemAvail, #bodyContent .itemContainer .itemPrice{
padding:0 10px 10px 10px;
}
#bodyContent .contentsTable .itemAvail{
padding:10px 0;
}
#bodyContent .itemContainer .regPrice{
padding-right:20px;
font-weight:bold;
}
#bodyContent .contentsTable .regPrice, #bodyContent .contentsTable .priceBold{
margin:10px 0 0;
}
#bodyContent .itemContainer .regPrice, #bodyContent .itemContainer .salePrice, #bodyContent .itemContainer .priceBold{
display:inline;
font-weight:bold;
}
#bodyContent .itemContainer .itemOption{
padding:0 10px 5px 10px;
display:block;
font-weight:bold;
}
#bodyContent .contentsTable .itemOption{
padding-top:5px;
display:block;
}
#bodyContent .contentsTable .contentsOptions{
padding:3px 0;
}
/******************/
/*END ITEM DETAILS*/
/******************/

.ys_primary{
background:$Emphasis-color;
color:$Emphasis-color-background;
font:bold 11px Arial,verdana,sans-serif;
padding:1px 5px;
text-align:center;
cursor:pointer;
}
/* Search Page Styles */
#info-div form,
.infoText div {margin:0 10px;}
#info-div form table td a img {margin-right:5px;}
#info-div form table td b {display:block; padding:15px 0 5px;}
#info-div form table td font {font-size:1em;}
/* Search Page Styles */

/* Cross-Sell Styles. */

.ystore-cross-sell-table { width:100%; font-size:inherit; font:100%; }
.ystore-cross-sell-title { padding-bottom:6px; color: $item-caption-title-text-color; font:bold $item-caption-title-text-size $item-caption-title-text-font; }
.ystore-cross-sell-table-vertical .ystore-cross-sell-cell { width:100%; }
.ystore-cross-sell-table-horizontal .ystore-cross-sell-cell { width:28%; padding-right:5%; }

.ystore-cross-sell-product-image-link { display:block; padding-bottom:8px; }
.ystore-cross-sell-product-caption { padding-bottom:16px; }
.ystore-cross-sell-product-caption p,
.ystore-cross-sell-product-caption h4 { margin:0 0 10px; font-size:11px; }
.ystore-cross-sell-table .ys_promo { font-weight:bold; }

/* For CPers */

#ys_superbar {left:0; margin:0 auto; position:static; top:0; width:762px; height:22px;}
#ys_cpers { float:left; }
#yfc_mini { float:right; }
.ys_clear { clear:both; }
#yscp_welcome_msg { font-family:verdana; text-decoration:none; margin:0px 10px 0px 5px; display:none; line-height:20px; color:#000000; }
#yscp_signin_link { display:none; line-height:20px; }
#yscp_signout_link { margin-left:10px; display:none; line-height:20px; }
#yscp_myaccount_link { display:none; line-height:20px; margin-right:10px; margin-left:10px; }
#yscp_welcome_msg .yscp_bold { font-weight:bold; color:#000000;}
a.yscp_link { font-family:verdana; text-decoration:none; color:#000000; line-height:20px; }
a.yscp_link:hover { font-family:verdana; color:#ffffff; text-decoration:underline; line-height:20px; }
a.yscp_link:visited {color:#000;}
#custRegDiv a.container-close { top:5px; }
.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft { background-color:#fff; }
.yui-skin-sam .yui-panel .bd { padding:0px; }
#iframe_id { width:679px; border:1px solid #000; padding:0px; }
#custRegDiv_h.hd { display:none; }
#custRegDiv_mask.mask { background-color:#000000; opacity:0.5; filter:alpha(opacity=50);}
#loadingDiv {height:210px; width:679px; position:absolute; background:#ececec;}
img.loadingImg {margin-top:90px; margin-left:20px;}

/* Social Media Share */

#ys_social_top_hr {border-top:1px solid #CFCECE; margin-bottom:5px; margin-top:5px; clear:both; }
#ys_social_media {height:26px;display:inline-block;vertical-align:middle;margin-left:10px; }
#ys_social_fblike {float:left;}
#ys_social_fbshare {float:left;}
#ys_social_tweet {float:left;}
#ys_social_yahoo {float:left;}
#ys_social_pinterest {float:left;}
#ys_social_v_separator {margin-left:10px;margin-right:10px;float:left;}
#ys_social_bottom_hr {border-top:1px solid #CFCECE; margin-top:5px;}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

this code is ment for .grow,

this code is ment for .grow, did you copy this piece of code from the internet?
Cause I am afraid you don't have a class called grow inside your HTML, you can do this, but as long as nothing has the class grow it won't affect anything.

Why do I think this? Because it doesn't matter where you place a certain piece of code inside css.
If you do it in the middle, top or bottom doesn't change anything (maybe speed).

Do you have an URL to your website for us, so we can give you the correct class or ID for this CSS.
Also, could you tell us what should have the .grow?

Thanks

Check Maximum Webdesign for your online solutions

crzynewbie004
crzynewbie004's picture
Offline
newbie
Los Angeles
Last seen: 7 years 15 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2014-04-07
Posts: 4
Points: 6

Thanks for the reply Helldog.

Thanks for the reply Helldog. I think I understand what your talking about. Before.. I am able to just manipulate the css to get what I want, but what you're now implying is that I need to originate some code. That would explain why none of the placement of the grow css was doing anything.

Below are the answers to your questions:

Website: http://www.goodstuffapparel.com/

Below is a link to an item page where I want to be able to hover over the picture and have a grow or zoom in feature. Almost all clothing e commerce websites have this built in feature for all of their products and you probably will understand what I am trying to achieve when you see the below link.

http://www.goodstuffapparel.com/blwhtrratop.html

Let me know if this is to much trouble to do, I am certainly willing to compensate someone if they have a solution.

Thanks again

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay I took a look at your

Okay I took a look at your website, and indeed the .grow class can not work if you have no item in your website which has the class .grow

Anyway, I have been playing around and altered your code, and also changed it a bit to make it fit -o- -ms- and -moz- aswell, instead of only -webkit-
This is the code you should paste inside your CSS to make it work.
Remember, the text is also an image, so this is growing as well.

#contentarea > div.itemContainer > div:nth-child(1) > a > img:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#contentarea > div.itemContainer > div:nth-child(1) > a > img:focus {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#contentarea > div.itemContainer > div:nth-child(1) > a > img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#contentarea > div.itemContainer > div:nth-child(1) > a > img {
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
-ms-transition-property: -ms-transform;
-o-transition-proprty: -o-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

Let me know if it is fixed now.

Check Maximum Webdesign for your online solutions

crzynewbie004
crzynewbie004's picture
Offline
newbie
Los Angeles
Last seen: 7 years 15 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2014-04-07
Posts: 4
Points: 6

Wow, that is just

Wow, that is just spectacular. You've got a talent! It worked flawlessly.

Maybe I can buy you lunch? Do you have a paypal account email? If you do message me and I will send my appreciations.

Thanks again!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Haha I am happy you liked the

Haha I am happy you liked the results.
You can always send me a message to my e-mail account.
You can find the contact details on my website, no need to give me anything, I am happy I could help you.

Check Maximum Webdesign for your online solutions