https://github.com/mmgrant73/image-cube

A web component that is a container (cube) that holds an image. When you hover over the image, the cube will flip to a text face of the cube, that can be use to describe the image. When no longer hovering over the cube it will flip back to the image
https://github.com/mmgrant73/image-cube

component css css3 html html5 javascript web

Last synced: 5 days ago
JSON representation

A web component that is a container (cube) that holds an image. When you hover over the image, the cube will flip to a text face of the cube, that can be use to describe the image. When no longer hovering over the cube it will flip back to the image

• Host: GitHub
• URL: https://github.com/mmgrant73/image-cube
• Owner: mmgrant73
• License: mit
• Created: 2019-12-27T05:47:29.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-27T06:32:44.000Z (almost 5 years ago)
• Last Synced: 2024-11-02T00:33:22.699Z (14 days ago)
• Topics: component, css, css3, html, html5, javascript, web
• Language: JavaScript
• Size: 45.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Image-Cube:

## What is it?

Image-Cube is a custom web component that holds a thumbnail image.  When you hover over the image, it will roll over like a cube

to another face that has text describing the image.  Once your mouse is not hovering over the image it will roll back to the image.

There is an image of it below.

![Alt text](/imgcube.png?raw=true "Image-Cube")

[Click here for Demo](https://mmgrant73.github.io/imagecube/imgcube.html)

### How to use it?

It is quite easy to use it on your webpage. Just follow the below steps:

1. Include the link to the script file that holds the this custom web component (img-cube.js) near the bottom of 

   the body section of your webpage.  See below

   

```

    

``` 

3)  Then use the custom element tags on your webpage.

```

    

```

That is all you have to do to use this custom element.  There is an example HTML page (imacube.html) that shows how to use it.

```

    

    

      

        Dropdown with Web Components

      

      

        
This is a test of the img-cube component


        

        

      

    

```	

### There are only three attributes that you need to set.

1. src - Is the link to the image that you are using

2. title - Will be the title of the text face of the cube

3. detail - The text that will be shown below the title on the text face of the cube.

Note: The style for this control was taken from codepen.  It was designed by Joshua Hibbert.  He deserves credit for the design. 

I just turn his design into a web component.