Swatch Code

HTML & CSS
1

Hi All

I ma making a website and I want to option that when you mouse over or tap a colour then a larger colour comes up like on this website:

http://magento2.codazon.com/fastest/ellyana_en/women/tops-women/jackets-women/olivia-1-4-zip-light-jacket.html

You can see the product colours and when you choose one it has the name and a big square.

From what I can work out it is called a swatch however I can’t find any examples anywhere.

Can someone please point me in the right direction.

Many Thanks

mrmbarnes

2

Hi there mrmbarnes,

perhaps this basic example will help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#color-picker {
    position: relative;
    width: 8.5em;
    padding: 12em 0 0; 
    text-align: center;
 }

#color-picker > span {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #000;
 }

#color-picker > span:nth-of-type( 2 ) {
    background-color: #1857f7;
 }

#color-picker > span:nth-of-type( 3 ) {
    background-color: #ef3dff;
 }

#color-picker > div  {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 8em;
    height: 10em;
    padding: 0.25em;
    border: 1px solid #ccc;
    border-radius: 0;
    background-color: #fff;
 }

#color-picker > div::after  {
    content: 'Black';
 }

#color-picker > div span  {
    display: block;
    width: 8em;
    height: 8em;
    background-color: #000;
 }

#color-picker > span:nth-of-type( 1 ):hover ~ div,
#color-picker > span:nth-of-type( 1 ):active ~ div {
    display: block;
 }

#color-picker > span:nth-of-type( 2 ):hover ~ div,
#color-picker > span:nth-of-type( 2 ):active ~ div {
    display: block;
 }

#color-picker > span:nth-of-type( 2 ):hover ~ div  span,
#color-picker > span:nth-of-type( 2 ):active ~ div  span{
    background-color: #1857f7;
 }

#color-picker > span:nth-of-type( 2 ):hover ~ div::after,
#color-picker > span:nth-of-type( 2 ):active ~ div::after {
    content: 'Blue';
 }

#color-picker > span:nth-of-type( 3 ):hover ~ div,
#color-picker > span:nth-of-type( 3 ):active ~ div {
    display: block;
 }

#color-picker > span:nth-of-type( 3 ):hover ~ div span,
#color-picker > span:nth-of-type( 3 ):active ~ div span {
    background-color: #ef3dff;
 }

#color-picker > span:nth-of-type( 3 ):hover ~ div::after,
#color-picker > span:nth-of-type( 3 ):active ~ div::after {
    content: 'Purple';
 }
</style>

</head>
<body>
 
 <div id="color-picker">
  <span></span>
  <span></span>
  <span></span>
  <div>
   <span></span>
  </div>
 </div>

</body>
</html>

coothead

3

Great… thanks for that… I think I can work it out with that help… thanks once again

4

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.