Skip to content

Commit

Permalink
deploy: 6dc0221
Browse files Browse the repository at this point in the history
  • Loading branch information
@Afif13
Afif13 committed Jul 14, 2023
1 parent 7d7e1d4 commit 72faee4
Show file tree
Hide file tree
Showing 8 changed files with 128 additions and 12 deletions.
7 changes: 6 additions & 1 deletion archive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h1>Archive</h1>



<p>Find below 90 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>
<p>Find below 91 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>

<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div>
Expand All @@ -63,6 +63,11 @@ <h1>Archive</h1>

<ul class="postlist" >

<li>
<a href="/zoom-hover-effect/" >Zoom effect on hover</a>
<time datetime="2023-07-14">July 14, 2023</time>
</li>

<li>
<a href="/corner-only-border-image/" >Corner-only borders with hover effect</a>
<time datetime="2023-07-13">July 13, 2023</time>
Expand Down
2 changes: 1 addition & 1 deletion corner-only-border-image/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ <h1>Corner-only borders with hover effect</h1>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<ul class="links-nextprev"><li class="prev"><a href="/overlapping-border-image/" title="Overlapping border on images with hover effect">Previous CSS Tip</a></li>
<ul class="links-nextprev"><li class="prev"><a href="/overlapping-border-image/" title="Overlapping border on images with hover effect">Previous CSS Tip</a></li><li class="next"><a href="/zoom-hover-effect/" title="Zoom effect on hover">Next CSS Tip</a></li>
</ul>

</main>
Expand Down
8 changes: 8 additions & 0 deletions feed/feed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@
"url": ""
},
"items": [
{
"id": "https://css-tip.com/zoom-hover-effect/",
"url": "https://css-tip.com/zoom-hover-effect/",
"title": "Zoom effect on hover",
"content_html": "<p>Add a simple zoom effect on hover for your images with a small code</p>\n<ul>\n<li>No extra element (only the <code>&lt;img&gt;</code> tag)</li>\n<li>5 CSS declarations</li>\n</ul>\n<pre class=\"language-css\" tabindex=\"0\"><code class=\"language-css\"><span class=\"token selector\">img</span> <span class=\"token punctuation\">{</span><br> <span class=\"token property\">--f</span><span class=\"token punctuation\">:</span> 1.15<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* the scale factor */</span><br> <br> <span class=\"token property\">clip-path</span><span class=\"token punctuation\">:</span> <span class=\"token function\">inset</span><span class=\"token punctuation\">(</span>0<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span><br> <span class=\"token property\">transition</span><span class=\"token punctuation\">:</span> .4s<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span><br><span class=\"token selector\">img:hover</span> <span class=\"token punctuation\">{</span><br> <span class=\"token property\">clip-path</span><span class=\"token punctuation\">:</span> <span class=\"token function\">inset</span><span class=\"token punctuation\">(</span><span class=\"token function\">calc</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>1 - 1/<span class=\"token function\">var</span><span class=\"token punctuation\">(</span>--f<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> * 50%<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span><br> <span class=\"token property\">scale</span><span class=\"token punctuation\">:</span> <span class=\"token function\">var</span><span class=\"token punctuation\">(</span>--f<span class=\"token punctuation\">)</span><br><span class=\"token punctuation\">}</span></code></pre>\n<p class=\"codepen\" data-height=\"450\" data-default-tab=\"result\" data-slug-hash=\"rNQJrVR\" data-preview=\"true\" data-user=\"t_afif\" style=\"height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n <span>See the Pen <a href=\"https://codepen.io/t_afif/pen/rNQJrVR\">\n Zoom effect on hover (single element)</a> by Temani Afif (<a href=\"https://codepen.io/t_afif\">@t_afif</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.</span>\n</p>\n<script async=\"\" src=\"https://cpwebassets.codepen.io/assets/embed/ei.js\"></script>",
"date_published": "2023-07-14T00:00:00Z"
}
,
{
"id": "https://css-tip.com/corner-only-border-image/",
"url": "https://css-tip.com/corner-only-border-image/",
Expand Down
21 changes: 20 additions & 1 deletion feed/feed.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,31 @@
<subtitle>A wide collection of CSS tips and tricks. The best place to keep up to date with the new CSS features</subtitle>
<link href="https://css-tip.com/feed/feed.xml" rel="self"/>
<link href="https://css-tip.com/"/>
<updated>2023-07-13T00:00:00Z</updated>
<updated>2023-07-14T00:00:00Z</updated>
<id>https://css-tip.com/</id>
<author>
<name>Temani Afif</name>
</author>

<entry>
<title>Zoom effect on hover</title>
<link href="https://css-tip.com/zoom-hover-effect/"/>
<updated>2023-07-14T00:00:00Z</updated>
<id>https://css-tip.com/zoom-hover-effect/</id>
<content type="html">&lt;p&gt;Add a simple zoom effect on hover for your images with a small code&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No extra element (only the &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag)&lt;/li&gt;
&lt;li&gt;5 CSS declarations&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;--f&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.15&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* the scale factor */&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token property&quot;&gt;clip-path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;inset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;0&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;transition&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .4s&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;img:hover&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;clip-path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;inset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;1 - 1/&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--f&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; * 50%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;scale&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--f&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;450&quot; data-default-tab=&quot;result&quot; data-slug-hash=&quot;rNQJrVR&quot; data-preview=&quot;true&quot; data-user=&quot;t_afif&quot; style=&quot;height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot;&gt;
&lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/t_afif/pen/rNQJrVR&quot;&gt;
Zoom effect on hover (single element)&lt;/a&gt; by Temani Afif (&lt;a href=&quot;https://codepen.io/t_afif&quot;&gt;@t_afif&lt;/a&gt;)
on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;</content>
</entry>

<entry>
<title>Corner-only borders with hover effect</title>
<link href="https://css-tip.com/corner-only-border-image/"/>
Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ <h1>Learn CSS the easy way</h1>

<ul class="postlist" >

<li>
<a href="/zoom-hover-effect/" >Zoom effect on hover</a>
<time datetime="2023-07-14">July 14, 2023</time>
</li>

<li>
<a href="/corner-only-border-image/" >Corner-only borders with hover effect</a>
<time datetime="2023-07-13">July 13, 2023</time>
Expand Down Expand Up @@ -108,17 +113,12 @@ <h1>Learn CSS the easy way</h1>
<time datetime="2023-06-06">June 06, 2023</time>
</li>

<li>
<a href="/3d-shine-effect/" >3D shine effect on hover</a>
<time datetime="2023-06-01">June 01, 2023</time>
</li>

</ul>




<p>80 more CSS Tips can be found in <a href="/archive/">the archive</a>.</p>
<p>81 more CSS Tips can be found in <a href="/archive/">the archive</a>.</p>



Expand Down
Binary file added og-images/NXbDKPDnHh.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 8 additions & 3 deletions sitemap.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,18 +451,23 @@
<lastmod>2023-07-13</lastmod>
</url>

<url>
<loc>https://css-tip.com/zoom-hover-effect/</loc>
<lastmod>2023-07-14</lastmod>
</url>

<url>
<loc>https://css-tip.com/about/</loc>
<lastmod>2023-07-13</lastmod>
<lastmod>2023-07-14</lastmod>
</url>

<url>
<loc>https://css-tip.com/archive/</loc>
<lastmod>2023-07-13</lastmod>
<lastmod>2023-07-14</lastmod>
</url>

<url>
<loc>https://css-tip.com/</loc>
<lastmod>2023-07-13</lastmod>
<lastmod>2023-07-14</lastmod>
</url>
</urlset>
Loading

0 comments on commit 72faee4

Please sign in to comment.