Skip to content

Change css information document #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rahul2544 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Change css information document #28

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc18bf2
Change css information document
Rahul2544 Oct 1, 2020
a9090f2
New changes
Rahul2544 Oct 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@ Imagehover.css is a lovingly crafted CSS library allowing you to easily implemen
2. Place the following markup in to your HTML document

```html
<figure class="imghvr-fade">
<figure class="imghover-fade">
<img src="#">
<figcaption>
// Hover Content
</figcaption>
</figure>
```

3. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element. In the example above this has been set to 'imghvr-fade'. A full list of hover effects and their classes can be found [here!](http://www.imagehover.io/).
3. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element. In the example above this has been set to 'imghover-fade'. A full list of hover effects and their classes can be found [here!](http://www.imagehover.io/).

## Adding a Link
To link your image, add an empty &lt;a&gt; tag just after the figcaption element.

```html
<figure class="imghvr-fade">
<figure class="imghover-fade">
<img src="#">
<figcaption>
// Hover Content
Expand Down Expand Up @@ -77,12 +77,14 @@ You can find and customize these variables in the `_variables.scss` file.
| `$figcaption-bg` | `#135796` (default), or any valid CSS color value | Specifies the `background-color` for the figcaption element. |
| `$figcaption-padding` | `30px` (default), or any length or percentage | Sets the `padding` on the figcaption element. |
| `$text-color` | `#ffffff` (default), or any valid CSS color value | Sets the text `color` for the figcaption element and any child `<h*> elements`. |
| `$border-color` | `#ffffff` (default), or any valid CSS color value | Sets the text `border-color` for ... |
| `$border-margin` | `5px` (default), or any valid length | ... |
| `$border-color` | `#ffffff` (default), or any valid CSS color value | Sets the text `border-color` for ...
|. $border-radius. |. '4px' or any valid css value. |make border corner round
| $border-style. | solid or any valid css value. | set the border-styls

| `$border-width` | `4px` (default), or any valid length | ... |
| `$transition-duration` | `0.35s` (default), or any valid time value | Sets the transition duration for the animation. |
| `$shift-distance` | `10px` (default), or any valid length | ... |

| `$shift-distance` | `10px` (default), or any valid length | ... |
| $ margin-10px. |. 10px or any valid css value. | ... | sets the margin between two boxes

## Browser Support

Expand Down